vue-webpack项目安装及配置

快速部署

# 全局安装 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

1. 先找到目录下的package.json文件
2. 找到文件中的scripts项
3. 找到对应的dev命令："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
4. 按照dev命令中的路径找到对应的build下的webpack.dev.conf.js文件
5. 按照脚本的程序执行
   • 引入版本检测文件check-versions
   • 引入配置文件，process.env.NODE_ENV获取环境变量
6. 判断当前运行的测试开发环境，使用console.log(process.env.NODE_ENV)将获取到的值打印到cmd中.(看到的值是config\dev.env.js第五行定义的值development开发模式)
7. 引入一些模块，根据环境变量来判断我们要引入的执行文件（webpack.dev.conf）
8. 修改端口号（process.env/process.env.PORT/config.dev.port>>>8080）

webpack.base.conf是webpack的基础文件，是核心文件，必须执行的文件。包含entry和output 这是入口和输出路径
main.js创建一个vue实例，并加载了模板组件App.vue

Vue-cli + webpack 配置多页面操作

参考