构建vue应用方法总结

Mark   in HangZhou

导语：踏入前端以后，我接触的第二个js框架就是vuejs，第一个jQuery。vuejs的虚拟dom和数据双向绑定，mvvm设计模式都挺吸引我的，还有那模板编译语法，组件化开发以及路由管理、状态管理，组成了一个生态系统。今天这篇主要是介绍如何构建一个vue应用。

# 构建方法

我认为有以下几个比较好的方法。

如果你不想使用脚手架，可以使用原生方式构建轻量级vue应用。

  • Vue-cli脚手架

这种是伴随着nodejs的和前端工程化的迅猛发展，还有webpack等构建工具的诞生，有了脚手架开发这一非常便捷的开发方式。

  • 自建脚手架开发

vuejs官方开发的脚手架固然好用，但是仍要了解如何搭建一款自己的webpack脚手架开发工具。

# 原生引入vue

这种方法是属于比较简单的页面开发方式，不需要webpack打包工具，不需要下载很大包，只需要引入必要的css和js即可实现简单项目开发。

  • 引入vuejs，vue-router,vuex

可以本地引入，也可以使用cdn。

推荐几个比较不错的cdn服务网站。

在网页的head里面加入以下js。

//本地引入
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/vuex.js"></script>

//使用cdn(bootcdn)
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
1
2
3
4
5
6
7
8
9

在body里面写vuejs的模板内容。

<div id="app">
  <h2>{{ title }}</h2>
</div>
1
2
3
let vm = new Vue({
  el: '#app', //vue模板id
  data: { // 数据对象
    title: 'hello, vuejs', //定义的变量
  },
  methods: { //方法
    print () {
      // some things
    }
  }
  // 。。。
})
1
2
3
4
5
6
7
8
9
10
11
12

我认为这就是一个简单的vue应用，里面是一个vue实例，还可以注册全局和内部组件，多个页面就组成一个简单的站点。如果你想写单页面应用，可以使用vue的路由管理，只写一个页面，然后定义不同的组件，注册到vm的实例里面使用。

# Vue-cli脚手架

这种方法是比较常用的广泛使用的，下面说一下使用方法，确保你的电脑上一定要装node和npm环境。

  • 安装node和npm
  • 全局安装vue-cli
  • 创建启动vue项目

# 安装node和npm

打开nodejs官网 (opens new window),选择适合你电脑的软件包，下载安装到电脑上。

打开cmd，输入以下命令，有输出版本号即是安装成功。

node -v
v10.15.3

npm -v
6.4.1
1
2
3
4
5

# 全局安装vue-cli

这里使用3.x版本的脚手架。

# 全局安装
npm install -g @vue/cli
# 查看版本
vue -V
3.6.3
1
2
3
4
5

如果你想使用2.x版本的脚手架，可以这样安装。

# 安装旧版本
npm install -g @vue/cli-init
1
2

# 创建启动vue项目

  • 3.x启动项目
# 使用命令行创建项目
vue create myapp
# 使用图形界面创建项目
vue ui
# 启动项目
npm run serve
# 打包项目
npm run build
1
2
3
4
5
6
7
8
  • 2.x启动项目
# 你熟悉的方法
vue init webpack myapp
# 启动项目
npm run dev
# 打包项目
npm run build
1
2
3
4
5
6

# 自建脚手架开发

这种方法就比较广泛了，不仅适用于vue，也适用于其他框架，这次使用webpack来进行搭建脚手架。如果你不熟悉webpack，可以读这篇文章 (opens new window)了解一下。示例在github上面，可以参考一下。febuild-cli (opens new window)。

  • 初始化项目
  • 安装依赖包
  • 配置文件
  • 启动运行
  • 打包

# 初始化项目

使用npm命令建一个私有包。

# -y表示一路回车
npm init -y
1
2

# 安装依赖包

包很多，我就不一一阐述了,这里直接上json文件。复制到你的json文件中，执行npm install安装所有用到的依赖包。

{
  "name": "my-cli",
  "version": "1.0.0",
  "description": "my cli",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev:vue": "webpack-dev-server --open --config ./build/webpack.config.js",
    "build:vue": "webpack --config ./build/webpack.base.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "csv-loader": "^3.0.2",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^2.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^6.0.0",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-dev-server": "^3.3.1",
    "webpack-merge": "^4.2.1",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "lodash": "^4.17.11",
    "url-loader": "^1.1.2",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-router": "^3.0.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "vuex": "^3.1.1"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# 配置文件

接着写配置文件，创建三个webpack的配置文件，放在build文件夹下。

  • 基础配置文件
//保存为webpack.common.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanHtmlPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const VueloaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  output: {
    filename: 'static/js/[name].[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/',
            },
          },
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/',
            },
          },
          'style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 50000,
              outputPath: 'static/image/',
              filename: '[name].[ext]',
            },
          },
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 50000,
              filename: 'static/fonts/[name].[ext]',
            },
          },
        ]
      },
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader'
        ]
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader'
        ]
      },
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      }
    ]
  },
  plugins: [
    new cleanHtmlPlugin(),
    new htmlWebpackPlugin({
      template: './index.html'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].[hash].css',
      chunkFilename: '[id].css',
    }),
    new VueloaderPlugin()
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
  • 开发环境配置文件
//保存为webpack.base.js
// 开发环境配置
const path = require('path');
const merge = require('webpack-merge');
const common =require('./webpack.common.js');
const ASSET_PATH = process.env.ASSET_PATH || '/';

module.exports = merge(common, {
  entry: {
    app: './src/vue/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: ASSET_PATH
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: true,
    compress: true,
    port: 8090
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  • 生成环境配置文件
//保存为webpack.config.js
// 生产环境配置
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const ASSET_PATH = process.env.ASSET_PATH || '/febuild-cli/';

module.exports = merge(common, {
  entry: {
    app: './src/vue/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../docs'),
    publicPath: ASSET_PATH
  },
  devtool: 'source-map',
  plugins: [
    new uglifyjsWebpackPlugin({
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
    })
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 启动运行

在启动之前，先创建几个文件夹，用来编写vue文件。

目录如下：

+ src
  + components
    - hello.vue
  + router
    - index.js
  - App.vue
  - main.js
1
2
3
4
5
6
7

运行npm命令启动项目。

npm run dev:vue
1

在游览器打开http://localhost:8090或者是http://127.0.0.1:8090，即可访问站点。

# 打包

这个就不仅简单了，直接运行命令npm run build:vue。

安装http服务插件，在游览器打开http://localhost:8090/dist/或者是http://127.0.0.1:8090/dist/，即可访问站点。

# 写在最后

以上就是我日常开发过程中的vue应用搭建方法总结，有欠缺之处，还请各位大佬指正，谢谢，以上项目代码仅供学习交流使用，转载请注明出处。

版权声明：博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：构建vue应用方法总结

如需转载，请注明《构建vue应用方法总结》转自，原作者Mark

分享至：

  • qq
  • qq空间
  • 微博
  • 豆瓣
  • 贴吧
构建方法
原生引入vue
Vue-cli脚手架
安装node和npm
全局安装vue-cli
创建启动vue项目
自建脚手架开发
初始化项目
安装依赖包
配置文件
启动运行
打包
写在最后
  • Copyright © 2017-2024 MarkGuan