Aspnet Mvc 先後端分離項目手記（四）vue項目的搭建（一）(iview)

時間 2019-11-20

標籤 aspnet mvc 後端分離項目手記 vue 搭建 iview 简体版

原文原文鏈接

一項目建立javascript

1，搭建vue-cli腳手架（依賴npm）css

沒有安裝npm的同窗，請先使用npm install -g vue-cli ，而後再進行這一步html

安裝的過程當中有幾項 vue

? Project name p1 //項目名
? Project description 1 //描述
? Author jimsfriend //做者
? Vue build standalone
? Install vue-router? Yes //是否使用路由（請選擇Yes）
? Use ESLint to lint your code? No //這裏是是否使用嚴格模式，必定要選否，不要問我爲何，嚴格模式很痛苦！
? Set up unit tests No //這裏隨便
? Setup e2e tests with Nightwatch? No //這裏隨便java

而後就是下載依賴包，得等會兒node

二項目結構webpack

1，build:webpack配置文件，能夠不用動ios

2，config,配置文件git

dev.env.js看名字叫生產環境.js，沒啥重要的用途，能夠不用關注github

、

這個也是

比較重要的是config/index.js文件

var path = require('path')

module.exports = {
  build: { // production 環境
    env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環境
    index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態資源路徑
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/', // 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
    productionSourceMap: true, // 是否開啓 cssSourceMap
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false, // 是否開啓 gzip
    productionGzipExtensions: ['js', 'css'] // 須要使用 gzip 壓縮的文件擴展名
  },
  dev: { // dev 環境
    env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環境
    port: 8080, // 運行測試頁面的端口
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/', // 編譯發佈的根目錄，可配置爲資源服務器域名或 CDN 域名
    proxyTable: {}, // 須要 proxyTable 代理的接口（可跨域）
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false // 是否開啓 cssSourceMap
  }
}

這段代碼是抄了園友，更加詳細的原文地址 https://www.cnblogs.com/whkl-m/p/6627864.html

3，dist：編譯後的打包文件默認是沒有的，

項目編譯打包：

cmd 到project1目錄，運行：npm run build ，而後對多出來一個dist文件，這個dist文件就是編譯後的項目，發佈的時候只需把dist放在 web宿主（如 IIS）上便可

4，mode_modules，node模塊，就是一些依賴包，

5 ，src，主要編寫代碼文件，後面會單獨介紹

6，static，也是靜態文件存放文件

7，剩下的都是寫不怎麼重要的，省略了。

二項目運行,進入project1 目錄在cmd中運行 npm run dev 回車便可

而後就運行起來,訪問 http://localhost:8080/

三安裝iview，

也是project1目錄下，運行 npm install iview --save