如何使用vue-cli脚手架创建vue项目

如何使用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