Hi 小朋友
Hi 小朋友

【Vue-CLI】Vue-CLI+webpack构建Vue项目

1. 前言

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 实现的交互式的项目脚手架。

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 ( @vue/cli-service )，该依赖：

    • 可升级；

    • 基于 webpack 构建，并带有合理的默认配置；

    • 可以通过项目内的配置文件进行配置；

    • 可以通过插件进行扩展。

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

        Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

在使用Vue-CLI之前，请确认你的电脑已经安装了 node。

2. 安装淘宝镜像

安装cnpm的原因：npm的服务器是外国的，所以有时候我们安装“模块“有时会很慢，还可能会安装失败。

安装方法:

 # -g 全局配置
 # 解决npm速度慢 
 npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm的作用：淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间。 安装完淘宝镜像之后，cnpm和npm命令行皆可使用，二者并不冲突 。

安装完cnpm可以使用cnpm -v查看版本。

cnpm -v

3. 安装vue-cli脚手架

3.1 全局安装 Vue-CLI

输入命令行：

 cnpm install vue-cli -g

安装完成之后，输入命令行 vue -V 查看版本号，出现相应得到版本号即为成功。

3.2 创建 Vue-CLI 项目

接下来初始化 Vue 项目(哪个文件位置都行)

我们用 vue init 命令来初始化项目，具体看一下这条命令的使用方法。

 vue init

：表示模板名称，Vue-CLI 官方为我们提供了5种模板

  • webpack：一个全面的 webpack+vue-loader 的模板，功能包括热加载，linting,检测和CSS扩展。

  • webpack-simple：一个简单 webpack+vue-loader 的模板，不包含其他功能，让你快速的搭建vue的开发环境。

  • browserify：一个全面的 Browserify+vueify 的模板，功能包括热加载，linting, 单元检测。

  • browserify-simple：一个简单 Browserify+vueify 的模板，不包含其他功能，让你快速的搭建vue的开发环境。

  • simple：一个最简单的单页应用模板。

：标识项目名称，这个你可以根据自己的项目来起名字。

在实际开发中，一般我们都会使用 webpack 这个模板，那我们这里也安装这个模板，在命令行输入以下命令：

 vue init webpack myblog(项目名)        #注：项目名不能大写，不能使用中文 



 此命令表示基于 webpack 初始化一个项目此文件生成你当前文件目录。


初始化 Vue 项目时会出现几个提示，分别是输入项目名称、描述、作者等，按实际情况选择即可。


 ？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；
 ？Project description ---- 项目描述，按需填写。无需填写可以直接回车；
 ？Author ---- 作者；
 ？Vue build ---- 构建模式，一般默认第一个；
 ？Install vue-router? ---- 是否安装vue-router；
 ？Use ESLint to lint yout code? ---- 格式校验，按需；
 ？Set up unit tests ---- 测试相关，按需；
 ？Setup e2e tests with Nightwatch? ---- 测试相关，按需；
 ？Should we run ‘npm install’ for you after the project has been created? ---- 按需；


项目初始化完成之后会出现以下信息，表示操作成功。


【Vue-CLI】Vue-CLI+webpack构建Vue项目_第1张图片


 3.3 安装项目依赖


进入你安装的项目


 cd myblog


安装项目依赖（类似java中的maven依赖）


 npm install


在项目初始化的时候，已经存在了 package.json 文件，直接使用 npm install 安装项目所需要的依赖，否则项目不能正确运行


4. 运行项目


 npm run dev





 浏览器访问：


 http://localhost:8080/


注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用，当有其他 Vue 项目运行的时候，可以使用 ctrl+C 来中断运行。


出现这个页面，说明我们的初始化已经成功


【Vue-CLI】Vue-CLI+webpack构建Vue项目_第2张图片


 5. 使用图形化界面


你也可以通过 vue ui 命令以图形化界面创建和管理项目：


 vue ui


上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。


【Vue-CLI】Vue-CLI+webpack构建Vue项目_第3张图片


 6. 项目打包


如何把写好的Vue网页放到服务器上，这里主要的命令就是要用到npm run build 命令。我们在命令行中输入npm run build命令后，vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中可以看出，你执行的npm run build命令就相对执行的 node build/build.js 。


package.json的scripts 字段：


 "scripts": {
   "dev": "node build/dev-server.js",
   "start": "npm run dev",
   "unit": "jest --config test/unit/jest.conf.js --coverage",
   "e2e": "node test/e2e/runner.js",
   "test": "npm run unit && npm run e2e",
   "build": "node build/build.js"
 }


在执行完npm run build命令后，在你的项目根目录生成了dist文件夹，这个文件夹里边就是我们要传到服务器上的文件。


dist文件夹下目录包括：




    

  •  
    index.html主页文件:因为我们开发的是单页web应用，所以说一般只有一个html文件。
     
    • 

  •  
    static 静态资源文件夹：里边JS、CSS和一些图片。
     
    • 





7、项目结构


vue-cli脚手架工具搭建了开发所需要的环境，为我们省去了很多精力。有必要对这个环境进行熟悉，我们就从项目的结构讲起。




Ps：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。




【Vue-CLI】Vue-CLI+webpack构建Vue项目_第4张图片


 |-- build // 项目构建(webpack)相关代码
 |-- config // 项目开发环境配置
 |-- node_modules // npm依赖包
 |-- src // 源码目录
 |-- static // 静态文件，比如一些图片，json数据等
 |-- .babelrc // ES6语法编译配置
 |-- .editorconfig // 定义代码格式
 |-- .gitignore // git上传需要忽略的文件格式
 |-- .poscssrc.js // 转化css的工具
 |-- index.html // 主页
 |-- package.json // 项目基本信息（在创建vue-cli项目后自动生成）
 |-- README.md // 项目说明


7.1 build——[webpack配置]


build 文件主要是 webpack 的配置，主要启动文件是 dev-server.js，当我们输入 npm run dev 首先启动的就是dev-server.js，它会去检查 node 及 npm 版本，加载配置文件，启动服务。


 |-- build // 项目构建(webpack)相关代码
 | |-- build.js // 生产环境构建代码
 | |-- check-version.js // 检查node、npm等版本
 | |-- dev-client.js // 热重载相关
 | |-- dev-server.js // 构建本地服务器
 | |-- utils.js // 构建工具相关
 | |-- webpack.base.conf.js // webpack基础配置
 | |-- webpack.dev.conf.js // webpack开发环境配置
 | |-- webpack.prod.conf.js // webpack生产环境配置


7.1.1 dev-server.js


当我们在运行 npm run dev 就相当于执行了node build/dev-server.js,说明这个文件相当重要，先来熟悉一下它。 我贴出代码并给出重要的解释。


 // 检查 Node 和 npm 版本
 require('./check-versions')()
 ​
 // 获取 config/index.js 的默认配置
 var config = require('../config')
 ​
 // 如果 Node 的环境无法判断当前是 dev / product 环境
 // 使用 config.dev.env.NODE_ENV 作为当前的环境
 ​
 if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 ​
 // 使用 NodeJS 自带的文件路径工具
 var path = require('path')
 ​
 // 使用 express
 var express = require('express')
 ​
 // 使用 webpack
 var webpack = require('webpack')
 ​
 // 一个可以强制打开浏览器并跳转到指定 url 的插件
 var opn = require('opn')
 ​
 // 使用 proxyTable
 var proxyMiddleware = require('http-proxy-middleware')
 ​
 // 使用 dev 环境的 webpack 配置
 var webpackConfig = require('./webpack.dev.conf')
 ​
 // default port where dev server listens for incoming traffic
 ​
 // 如果没有指定运行端口，使用 config.dev.port 作为运行端口
 var port = process.env.PORT || config.dev.port
 ​
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware
 ​
 // 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置
 var proxyTable = config.dev.proxyTable
 ​
 // 使用 express 启动一个服务
 var app = express()
 ​
 // 启动 webpack 进行编译
 var compiler = webpack(webpackConfig)
 ​
 // 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
   stats: {
     colors: true,
     chunks: false
   }
 })
 ​
 // 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload
 var hotMiddleware = require('webpack-hot-middleware')(compiler)
 // force page reload when html-webpack-plugin template changes
 compiler.plugin('compilation', function (compilation) {
   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
     hotMiddleware.publish({ action: 'reload' })
     cb()
   })
 })
 ​
 // proxy api requests
 // 将 proxyTable 中的请求配置挂在到启动的 express 服务上
 Object.keys(proxyTable).forEach(function (context) {
   var options = proxyTable[context]
   if (typeof options === 'string') {
     options = { target: options }
   }
   app.use(proxyMiddleware(context, options))
 })
 ​
 // handle fallback for HTML5 history API
 // 使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址
 app.use(require('connect-history-api-fallback')())
 ​
 // serve webpack bundle output
 // 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上
 app.use(devMiddleware)
 ​
 // enable hot-reload and state-preserving
 // compilation error display
 // 将 Hot-reload 挂在到 express 服务上
 app.use(hotMiddleware)
 ​
 // serve pure static assets
 // 拼接 static 文件夹的静态资源路径
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 // 为静态资源提供响应服务
 app.use(staticPath, express.static('./static'))
 ​
 // 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露
 module.exports = app.listen(port, function (err) {
   if (err) {
     console.log(err)
     return
   }
   var uri = 'http://localhost:' + port
   console.log('Listening at ' + uri + '\n')
 ​
   // when env is testing, don't need open it
   // 如果不是测试环境，自动打开浏览器并跳到我们的开发地址
   if (process.env.NODE_ENV !== 'testing') {
     opn(uri)
   }
 })


7.1.2 webpack.base.confg.js


webpack的基础配置文件：


...
 ...
 module.export = {
   // 编译入口文件
   entry: {},
   // 编译输出路径
   output: {},
   // 一些解决方案配置
   resolve: {},
   resolveLoader: {},
   module: {
     // 各种不同类型文件加载器配置
     loaders: {
       ...
 ...
       // js文件用babel转码
       {
         test: /\.js$/,
         loader: 'babel',
         include: projectRoot,
         // 哪些文件不需要转码
         exclude: /node_modules/
       },
       ...
 ...
 }
   },
   // vue文件一些相关配置
   vue: {}
 }


7.2 config——[vue项目配置]


config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等。


 |-- config // 项目开发环境配置
 | |-- dev.env.js // 开发环境变量
 | |-- index.js // 项目一些配置变量
 | |-- prod.env.js // 生产环境变量
 | |-- test.env.js // 测试环境变量


7.3 node_modules——[依赖包]


node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入 npm install [依赖包名称] , 回车。


在两种情况下我们会自己去安装依赖：


（1）项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等


安装方法示例：npm install css-loader


（2）安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件)




注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息


如安装11.1.4版本的 vue-loader，输入 npm install [email protected]




7.4 src——[项目核心文件]


src 的目录结构：


 |-- src // 源码目录
 | |-- assets // 静态文件，比如一些图片，json数据等
 | |-- components // vue公共组件
 | |-- router // 配置路由
 | |-- App.vue // 页面入口文件
 | |-- main.js // 程序入口文件，加载各种公共组件


7.4.1 static和assets文件夹的区别


首先，static 文件夹和 src 目录下 assets 文件夹在 vue-cli 生成的项目中，都是用来存放静态资源的。


    

  •  
    assets 目录中的文件会被 webpack 处理解析为模块依赖，只支持相对路径形式。build 的时候由 Webpack 解析为模块依赖。
     
    • 

  •  
    static/ 目录下的文件并不会被 Webpack 处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 项目 /config/index.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]，所以如果需要引用static目录下的图片及其他资源，应该使用绝对路径。
     
    • 



7.4.2 components/HelloWorld.vue


这个文件就是我们在第一次运行项目时看到的页面文件了。也是分为