構建vue應用方法總結

時間  2019-12-07
標籤 構建 vue 應用 方法 總結 简体版
原文   原文鏈接

導語：踏入前端之後，我接觸的第二個js框架就是vuejs，第一個jQuery。vuejs的虛擬dom和數據雙向綁定，mvvm設計模式都挺吸引個人，還有那模板編譯語法，組件化開發以及路由管理、狀態管理，組成了一個生態系統。今天這篇主要是介紹如何構建一個vue應用。css

構建方法

我認爲有如下幾個比較好的方法。html

  • 原生引入vue

若是你不想使用腳手架，可使用原生方式構建輕量級vue應用。前端

  • Vue-cli腳手架

這種是伴隨着nodejs的和前端工程化的迅猛發展，還有webpack等構建工具的誕生，有了腳手架開發這一很是便捷的開發方式。vue

  • 自建腳手架開發

vuejs官方開發的腳手架當然好用，可是仍要了解如何搭建一款本身的webpack腳手架開發工具。node

原生引入vue

這種方法是屬於比較簡單的頁面開發方式，不須要webpack打包工具，不須要下載很大包，只須要引入必要的css和js便可實現簡單項目開發。webpack

  • 引入vuejs，vue-router,vuex

能夠本地引入，也可使用cdn。ios

推薦幾個比較不錯的cdn服務網站。git

在網頁的head裏面加入如下js。github

//本地引入
<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>
複製代碼

在body裏面寫vuejs的模板內容。web

<div id="app">
  <h2>{{ title }}</h2>
</div>
複製代碼
let vm = new Vue({
  el: '#app', //vue模板id
  data: { // 數據對象
    title: 'hello, vuejs', //定義的變量
  },
  methods: { //方法
    print () {
      // some things
    }
  }
  // 。。。
})
複製代碼

我認爲這就是一個簡單的vue應用，裏面是一個vue實例，還能夠註冊全局和內部組件，多個頁面就組成一個簡單的站點。若是你想寫單頁面應用，可使用vue的路由管理，只寫一個頁面，而後定義不一樣的組件，註冊到vm的實例裏面使用。

Vue-cli腳手架

這種方法是比較經常使用的普遍使用的，下面說一下使用方法，確保你的電腦上必定要裝node和npm環境。

  • 安裝node和npm
  • 全局安裝vue-cli
  • 建立啓動vue項目

安裝node和npm

打開nodejs官網,選擇適合你電腦的軟件包，下載安裝到電腦上。

打開cmd，輸入如下命令，有輸出版本號便是安裝成功。

node -v
v10.15.3

npm -v
6.4.1
複製代碼

全局安裝vue-cli

這裏使用3.x版本的腳手架。

# 全局安裝
npm install -g @vue/cli
# 查看版本
vue -V
3.6.3
複製代碼

若是你想使用2.x版本的腳手架，能夠這樣安裝。

# 安裝舊版本
npm install -g @vue/cli-init
複製代碼

建立啓動vue項目

  • 3.x啓動項目
# 使用命令行建立項目
vue create myapp
# 使用圖形界面建立項目
vue ui
# 啓動項目
npm run serve
# 打包項目
npm run build
複製代碼
  • 2.x啓動項目
# 你熟悉的方法
vue init webpack myapp
# 啓動項目
npm run dev
# 打包項目
npm run build
複製代碼

自建腳手架開發

這種方法就比較普遍了，不只適用於vue，也適用於其餘框架，此次使用webpack來進行搭建腳手架。若是你不熟悉webpack，能夠讀這篇文章瞭解一下。示例在github上面，能夠參考一下。febuild-cli。

  • 初始化項目
  • 安裝依賴包
  • 配置文件
  • 啓動運行
  • 打包

初始化項目

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

# -y表示一路回車
npm init -y
複製代碼

安裝依賴包

包不少，我就不一一闡述了,這裏直接上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"
  }
}
複製代碼

配置文件

接着寫配置文件，建立三個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()
  ],
}
複製代碼
  • 開發環境配置文件
//保存爲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
  }
})
複製代碼
  • 生成環境配置文件
//保存爲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)
    })
  ]
})
複製代碼

啓動運行

在啓動以前，先建立幾個文件夾，用來編寫vue文件。

目錄以下：

+ src
  + components
 - hello.vue
  + router
 - index.js
  - App.vue
  - main.js
複製代碼

運行npm命令啓動項目。

npm run dev:vue
複製代碼

在遊覽器打開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應用搭建方法總結，有欠缺之處，還請各位大佬指正，謝謝，以上項目代碼僅供學習交流使用，轉載請註明出處。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程