如何使用vue-cli脚手架创建vue项目
1.npm安装cnpm
cnpm与npm区别:npm下载源于外网,下载速度慢,cnpm是淘宝团队研发的国内下载渠道
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm安装成功
C:\Users\hp\AppData\Roaming\npm\cnpm -> C:\Users\hp\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.0
added 689 packages from 932 contributors in 56.515s
查看已安装cnpm版本号
cnpm -v
运行结果
cnpm@6.1.0 (C:\Users\hp\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.11.2 (C:\Users\hp\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.9.1 (D:\Java 开发环境\Node.js\node.exe)
npminstall@3.23.0 (C:\Users\hp\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\hp\AppData\Roaming\npm
win32 x64 10.0.17134
registry=https://r.npm.taobao.org
2.cnpm安装vue-cli脚手架
-g表示全局安装
cnpm install vue-cli -g
查看当前版本号
vue -V
运行结果:
C:\Users\hp>"node" "C:\Users\hp\AppData\Roaming\npm\\node_modules\vue-cli\bin\vue" -V
2.9.6
3.基于webpack创建新项目
注:必须联网创建否则将会失败
创建一个名为my-app的项目
vue init webpack my-app
运行结果
按照提示依次输入y/n
C:\Users\hp>"node" "C:\Users\hp\AppData\Roaming\npm\\node_modules\vue-cli\bin\vue" init webpack my-app
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
#项目名称
? Project name my-app
#指明项目类型,创建一个vue.js的项目
? Project description A Vue.js project
#作者
? Author mzdx
? Vue build standalone
#是否安装vue路由,选择y
? Install vue-router? Yes
#是否监视代码报错
? Use ESLint to lint your code? Yes
#测试环境
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "my-app".
进入项目
C:\Users\hp>cd my-app
启动服务
默认启动命令
npm run dev
停止服务
ctrl+C +y