1.安装node,这个是肯定要安装的
2.安装vue脚手架构建工具,命令行输入
npm install –g @ vue/cli
3.安装webpack
通过 npm 或者 cnpm 安装webpack模块化打包工具
npm install webpack –g
或
cnpm install webpack –g
4.初始化 webpack 项目,执行命令:
vue init webpack 123app
其中 123app 是我们要建立的项目的名称,当脚本执行时会进行确认
安装依赖,如下所示:
Project name 123app 填写你定义的项目名称 (可以不填直接敲回车)
Project description 填写对项目的描述
Author填写作者名
选择第一个按回车 就会出现:Vue build standalone
Install vue-router? 是否安装vue-router Yes
Use ESLint to lint your code? 是否用ESLint No
Set up unit tests 是否建立Unit单元测试 No
Setup e2e tests with Nightwatch? 是否E2E黑盒测试 No
我们是否应该在项目创建后为您运行“npm安装”?(推荐)(使用箭头键)
Yes,use NPM
说明:
ESLint的作用是检查代码错误和统一代码风格的。确认添加ESLint后,在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。
eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。
eslintrc.js是ESLint配置文件,用来设置插件、自定义规则、解析器等配置。
Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。
Mocha是一个测试框架,在vue-cli中实现单元测试。
启动项目:
执行初始化项目以后,下面会有对应的命令:
已经初始化了项目,并且在 package.json 里面已经有相关配置,所以在这里可以直接安装;
安装完成之后再执行命令: npm run dev
整个项目就已经启动了:
npm run dev 运行
npm run build 打包