1、首先安装nodejs
建议安装12版本及以下的,否则太新的容易出现版本兼容问题。当前安装:V12.18.2
安装淘宝镜像(cnpm)
npm install cnpm -g --registry=https://registry.npm.taobao.org
检验cnpm安装成功否
cnpm -v
2、安装vue脚手架
设置npm为淘宝镜像:
npm config set registry http://registry.npm.taobao.org/
① 安装vue
npm install vue
② 安装webpack:
cnpm install webpack -g
或者(cnpm install -g webpack)
注意:webpack 4.X 开始,需要安装 webpack-cli 依赖 ,所以使用这条命令
cnpm install webpack webpack-cli -g
检验webpack安装成功否
webpack -v
③ 全局安装vue-cli,在cmd中输入命令:
npm install vue-cli -g
或者安装淘宝版:cnpm intall vue-cli -g
检验vue-cli安装成功否
vue -V(注意这里是大写的“V”)
④ 还需要安装webpack-dev-server(这是在启动项目时候报的,只管执行命令就是了)
npm install webpack-dev-server --save-dev
3、创建项目
vue init webpack projectName(项目名字-不能包含大写)
执行命令后会有几个选项,需要根据需求自行选择:
Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。
Project description:项目描述,直接回车
Author :作者
vue build 构建方式(暂且这么解释)
两个选择(上下箭头选择,回车即为选定)
1.Runtime + Compiler:recommended for most users
(译:运行+编译:被推荐给大多数用户)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)
这里推荐使用1选项,适合大多数用户的
install vue-router?是否安装vue的路由插件,需要就选y,否则就n(以下均遵循此方法)
Use ESLint to lint your code?是否使用ESLint检测你的代码?
(ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。)
Setup unit tests? 是否安装单元测试
Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
Should we run 'npm install' for you after the project has been created?(译:项目创建后是否要为你运行“npm install”?这里选择包管理工具)
选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
一路回车到此等待安装完毕,会提示接下来的命令行
4、安装以来,命令进入到新建的项目目录下,执行:
npm install
5、启动项目:
npm run dev
启动成功会告诉你项目地址:
6、浏览器输入项目地址:http://localhost:8080
7、项目结构:
build文件夹:
config 文件夹: