目录
@vue/cli 4.x构建项目(2020-8-27 补充)
vue-cli2脚手架的安装使用
1:安装环境与工具
安装node.js
安装npm,cnpm: 新版nodejs安装好以后就装上了npm
安装webpack: npm install webpack -g
安装vue-cli脚手架: npm install vue-cli -g
查看vue版本 vue -V
2:使用vue-cli来构建项目
在控制台cd到想要创建项目的文件夹
安装脚手架 vue init webpack xxx (xxx为项目名称)
出现下面的情况:
$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
这时候项目目录就会被创建在指定的文件夹下,然后cd到项目文件夹下 cd xxx
npm install
运行项目 npm run dev
@vue/cli 4.x构建项目(2020-8-27 补充)
vue-cli脚手架已经到更新到4.x了,名称也由vue-cli变成了@vue/cli,看到一篇写的挺全的构建过程文章,补充进来:
https://blog.csdn.net/liyunkun888/article/details/102738377
下面大致写一下,详细的请移步上面的链接:
node环境: Node.js v8.9 或更高版本 (官方推荐 v10 以上,由于 Node.js v8 已不再维护,以保证最佳的兼容性)。
大致流程:
1. npm uninstall vue-cli -g (若已经全局安装了旧版本的vue-cli 需要先卸载)
2. npm install -g @vue/cli (全局安装@vue/cli包)
3. vue --version (查看版本,若出现版本号说明安装成功)
4. vue create hello-world (假设新项目名为hello-world,构建新项目hello-world )
5. npm run serve ( 等项目构建完成后,启动项目。默认在package.json中配置的启动命令是serve,可以自行去修改成dev,然后 npm run dev 启动)