Vue-cli + webpack搭建vue项目环境

开发前准备工做

Vue项目依赖环境

Vue项目开发须要基于Nodejs，请确保安装Nodejs(建议安装最新版本Nodejs)。

node -v

项目开发过程当中，须要利用Nodejs包管理器NPM。

npm -v

安装命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

全局安装webpack

npm install webpack -g

安装全局的vue-cli脚手架

npm install -g @vue/cli 

检查版本

vue -V

Vue项目的开发流程

Vue项目的开发流程，以下：

1. 利用命令行工具建立项目
2. 项目开发前配置
3. 项目开发阶段
4. 项目打包与优化阶段
5. 项目上线

接下来咱们以商城项目为例，项目目录 my-project

1. 利用命令行工具建立项目

vue create my-project     //普通的vue项目
或 
vue ui // 图形界面方式建立项目
或
vue init webpack my-project      //建立一个基于”webpack”的项目,后面是项目名,

 

进入项目配置向导，在项目建立的过程当中，你能够选择项目须要依赖的工具如(vue-router、vuex等)。

项目建立完成，启动项目测试安装是否成功：

cd  my-project
npm run serve    //运行开发环境

 

　　

运行后，你会看到以下页面：

 

2. 项目开发前配置

1. 根据需求修改配置
2. 根据需求修改目录结构
3. 根据需求安装本身所需的第三方依赖(如组件库element-ui、axios、vue-filter等)
4. 根据后台提供的数据接口规范开发mock模拟接口。
5. ....

3. 项目开发阶段

根据项目需求开发组件、开发页面、与后台进行项目联调、项目测试。

4. 项目打包与优化阶段

项目打包测试

运行下列命令进行项目打包：

npm run build

打包完成后的，最终代码都会生成在dist目录中。

项目优化

经过下列命令查看打包分析：

npm run build --report

根据分析结果，进行相应优化

5. 项目上线

将dist目录中的资源，发布到线上环境。

目录结构

/
│
├── node_modules/            # 自动生成，包含Node生产依赖以及开发依赖 │ ├── public/ # 纯静态资源，不会被wabpack构建。 │ ├── index.html # 入口页面 │ └── favicon.ico # 网站站标 │ ├── src/ # 项目源码目录 │ ├── main.js # 入口js文件 │ ├── app.vue # 根组件 │ ├── components # 公共组件目录 │ │ └── title.vue │ ├── pages/ # 页面目录 │ │ ├── about.vue │ │ └── notfound.vue │ ├── assets/ # 资源目录，这里的资源会被wabpack构建 │ │ └── images/ │ │ └── logo.png │ ├── routes/ # 前端路由 │ │ └── index.js │ └── store/ # 应用级数据（state） │ └── index.js │ ├── .gitignore # git排除文件 │ ├── babel.config.js │ ├── vue.config.js # vue配置文件 │ ├── package.json # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息 │ └── README.md 

目录介绍

文件	类型	描述
src	目录	存放开发文件目录
src/main.js	文件	入口文件
src/router	目录	存放路由目录
src/components	目录	存放项目组件(.vue)目录
src/App.vue	文件	App.vue文件，这是Vue本身的文件类型，在Vue中，官网叫它作组件，单页面的意思是结构，样式，逻辑代码都写在同一个文件中，当咱们引入这个文件后，就至关于引入对应的结构、样式和JS代码
src/assets	目录	存放 js、css、模板、图片、flash 等等静态资源文件
package.json	文件	配置文件，保存一些依赖信息，以及项目初始化配置。
public	目录	静态资源，不会被wabpack构建
public/index.html	文件	网站首页
public/favicon.ico	文件	网站站标
config	目录	项目配置

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//值为false 去掉警告 You are running Vue in development mode
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

安装webpack，webpack-dev-server以及相关的loaders

npm install -g webpack
npm install -g webpack-dev-server
为项目安装其余依赖
npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

 

webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并

css-loader：编译写入css

 style-loader：把编译后的css整合进html

 file-loader：编译写入文件，默认状况下生成文件的文件名是文件名与MD5哈希值的组合

 vue：vue主程序

 vue-loader：编译写入.vue文件

 vue-html-loader：编译vue的template部分 vue-style-loader：编译vue的样式部分 vue-hot-reload-api：webpack对vue实现热替换 babel-core：ES2015编译核心 babel-loader：编译写入ES2015文档 babel-preset-es2015：ES2015语法 babel-preset-stage-0：开启测试功能 babel-runtime：babel执行环境 url-loader 

项目配置

vue.config.js 是一个可选的配置文件，若是项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可使用 package.json 中的 vue 字段，可是注意这种写法须要你严格遵守 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

// vue.config.js module.exports = { // 选项... } 

配置详解

可点击访问官方配置详解

module.exports = {
    // 部署应用时的基本 URL
    publicPath: '/',
    // 输出文件目录 运行时生成的生产环境构建文件的目录(默认'dist'，构建以前会被清除)
    outputDir: 'dist',
    //放置生成的静态资源(js、css、img、fonts)的(相对于 outputDir)目录(默认'')
    assetsDir: '',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    compiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    vueLoader: {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null, // 设置代理
        before: app => {}
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
}