快速部署
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
详细部署
基本环境
node 安装 及 安装成功验证
- 安装node程序
- 检验安装成功及版本校验
- 使用自带的cmd命令行
- 使用windows下
git bash
node版本校验及安装查看.png
查看npm包管理工具安装成功否.png
安装vue脚手架工具
vue-cli. 执行语句：npm install vue-cli -g
下载vue-cli包.png
vue-cli初始化webpack项目
执行语句：
vue init webpack new-project
引导语句页面.png
对应引导句讲解：
1、回车跳转下一个引导配置问题。
2、Project name 填写你定义的项目名称； project description 后面填写对项目的描述； Author 填写作者名
3、之后会问到是够安装vue-router / 是否用ESLint / 是否建立Unit单元测试 / E2E 黑盒测试 / Karma + Mocha
- ESLint的作用是检查代码错误和统一代码风格的。确认添加ESLint后，在创建的项目中就会出现
.eslintignore和.eslintrc.js两个文件。- eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。
- eslintrc.js是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。
- Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。
- Mocha是一个测试框架，在vue-cli中实现单元测试。
运行项目
执行语句：
cd new-project
npm install
npm run dev
项目启动三部曲.png
将执行语句集成在
package.json中的script模块 , 只需要npm start即可以执行
image.png
项目目录结构
详细的目录介绍.png
-
build 操作文件，使用
npm run *执行的就是这里的文件（Webpack配置文件） -
config配置文件，执行文件需要的配置信息
- index.js（主要的项目配置文件）
-
src 资源文件，所有的组件以及所用的图片都在此
- assets 资源文件夹，图片之类的资源（模块化资源<由webpack处理>）
- components组件文件夹，写的所以组件（UI组件）
- router路由文件夹，决定页面的跳转规则
- App.vue 应用组件，所有自己的写的组件，都在这个组件之上。（主APP的部件）
-
main.js webpack入口文件，webpack四大特征：entry入口，output输出，loader加载器，plugins插件。可以在项目中
build\webpack.base.config.js中看到 （12行）看入口文件在哪儿。（app入口文件）
- static（纯静态资源）
- node_modules文件夹，所有依赖的模块
- package.json 不允许有任何注释，是npm的入口文件（建设的script和依赖）
-
test
- unit （单元测试）
- e2e （e2e测试）
- editorconfig （为编辑器进行的缩进，空格，和相似设置）
- eslintignore（eslint忽略规则）
- eslintrc.js （eslint的配置）
- postcssrc.js （postcss的配置）
- index.html （index.html模板）
- babelrc（babel的配置）
程序执行的过程
npm run dev
- 先找到目录下的
package.json文件 - 找到文件中的
scripts项 - 找到对应的
dev命令："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" - 按照dev命令中的路径找到对应的build下的
webpack.dev.conf.js文件 - 按照脚本的程序执行
- 引入版本检测文件
check-versions - 引入配置文件，
process.env.NODE_ENV获取环境变量
- 引入版本检测文件
- 判断当前运行的测试开发环境，使用
console.log(process.env.NODE_ENV)将获取到的值打印到cmd中.(看到的值是config\dev.env.js第五行定义的值development开发模式) - 引入一些模块，根据环境变量来判断我们要引入的执行文件（
webpack.dev.conf） - 修改端口号（
process.env/process.env.PORT/config.dev.port>>>8080）
webpack.base.conf是webpack的基础文件，是核心文件，必须执行的文件。包含entry和output 这是入口和输出路径
main.js创建一个vue实例，并加载了模板组件App.vue
