vue-cli构建一个工程
使用前,必须要先按照 node:安装node
Vue CLI官方文档:https://cli.vuejs.org/zh/
安装node地址:https://nodejs.org/zh-cn/download/
安装后node文件如下:
需要配置环境变量
然后,就可以使用 npm 命令安装了:
打开cdm命令行输入以下命令
npm install -g @vue/cli
检测是否真的安装成功。打开cmd命令,查看一下node和自带的npm的版本信息
然后,就可以使用 vue 命令创建、管理项目了:
# 先切换到相应目录
e:
cd myhomework # 然后创建项目
vue create vue-hello-world # 创建完后,切换到项目目录
cd vue-hello-world # 接下来,启动项目服务器
# 服务器启动后,就可以使用 http://localhost:8080 访问到首页了
npm run serve # 然后就可以进行开发了
# - public 下面放一些全局静态文件
# - src 下面存在 main.js 跟相关 .vue 文件
# -- main.js 是入口 js 文件 # 开发完成后,就可以将工程打包、分发,运行在客户端了
# 执行完命令,打包的内容会在 dist 文件夹中
npm run build ## 另外,也可以使用图形化界面的形式进行(不推荐)
vue ui
效果展示:
vue-cli构建一个工程的更多相关文章
- Vue+webpack构建一个项目
1.安装CLI命令的工具 推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- @vue/cli 构建得项目eslint配置
如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- 使用Vue CLI构建Vue项目
第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...
- @vue/cli 构建得项目eslint配置2
使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
随机推荐
- python基础之初始函数
首先,为什么要使用函数? 函数的本质来说,就是写一串代码具有某些功能,然后封装起来,接下来可以很方便的调用 例如...然后... # s = '金老板小护士'# len(s) #在这里需求是求字符串s ...
- IntelliJ IDEA setup JDK无效
参考 问题现象:功能全部爆红,总是提示“setup JDK”,设置JDK后无效.但程序能够正常编译和运行. 解决方法: File -> Invalidate Caches/Restart -& ...
- luogu P3226 [HNOI2012]集合选数
luogu 因为限制关系只和2和3有关,如果把数中2的因子和3的因子都除掉,那剩下的数不同的数是不会相互影响,所以每次考虑剩下的数一样的一类数,答案为每类数答案的乘积 如果选了一个数,那么2的因子多1 ...
- JavaScript快速排序法实现数组排序
大致分三步: 1.找基准(一般是以中间项为基准) 2.遍历数组,小于基准的放在left,大于基准的放在right 3.递归 var arr = [10,8,6,9,1,7,1,13,5,1,9]; / ...
- 07 Nginx负载均衡
1.负载均衡的实现. 1.准备三台虚拟机,比如 192.168.119.146 提供资源 192.168.119.147 提供nginx的负载均衡 192.168.119.148 提供资源 2.分别配 ...
- react 不同环境配置不同域名
npm eject 先将配置文件暴露出来 将scripts中的build文件复制一份,改名为你需要的名字 将其中的 process.env.NODE_ENV 赋值为你需要的环境 在package.js ...
- 无Xwindow的linux系统安装VMware Tools
首先登陆linux 系统,最好是root用户: 然后挂载cdrom: mkdir -p /mnt/cdrom mount -t iso9660 /dev/cdrom /mnt/cdrom 进入cdro ...
- deep_learning_LSTM长短期记忆神经网络处理Mnist数据集
1.RNN(Recurrent Neural Network)循环神经网络模型 详见RNN循环神经网络:https://www.cnblogs.com/pinard/p/6509630.html 2. ...
- linux 指定ftp用户 特定目录及权限
Linux添加FTP用户并设置权限 在linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建 ...
- ValueError:Object arrarys cannot be loaded when allow_pickle=False
运行python程序报错:ValueError:Object arrarys cannot be loaded when allow_pickle=False 错误原因:numpy版本太高 解决方案: ...