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: {
        // ...
    }
}