Vue cli構建 及 項目打包以及出現的問題 （update 2020-05）

　　1. 首先安裝node,推薦偶數版本;好了之后檢查一下: node -v;出現版本好即為安裝成功;win10家庭版本的msi版本的時候出現無法打開,更別說安裝,可以自行百度;

　　2.npm install vue-cli -g; ----->>vue -V;出現版本號就是安裝成功了;

　　3.cd 到指定目錄; vue init webpack 項目名稱; 一些提示信息一一不說了;安裝成功之后會有提示:一般按照他的提示步驟就可以了,cd 項目文件夾,

npm install(這個是安裝 packjson.json的依賴,非常重要) , 最后運行 npm run dev; 會自動在8080端口打開網頁,那么環境這一步是成功了;

       4.介紹一下幾個非常中重要的文件(夾):
        config目錄下的index.js是配置,node_modules下全部都是所要依賴模塊的文件夾;src是本地資源;比如我們要編寫的文件;其中main.js是入口文件;

　　5.下面介紹模塊化引入vue文件,好記性不如爛筆頭:

項目目錄部分:

 

比如要在App.vue中引入其他模塊;

import componentA @/components/componentA                  //下圖ruter-view標簽僅僅表示顯示,有組件不一定能夠顯示,必須要router-view一下;當前app.vue為默認根模塊;

在Banana中應該這樣: <一個標准的vue文件應該包括 下面三種大類的標簽>  其中name屬性必不可少;

 注意了:這里面的不需要聲明一個 變量=new Vue({ }) 之類的,這個文件本身就代表一個實例了,在export default 內中 其實就是一個 vue字面量對象的描述,可以這樣認為;

 

關於路由傳參數:(以下是main.js), 這里有一個坑;

用 webpack vue-cli 自動構建項目后, 注意路由模塊,是放在main.js下,還是放在router文件下的index.js

 

廢話少說: 這里關鍵是正確引入路由,正確配置路由(構建路由對象),每一個路由給他一個name屬性方便使用路由,在者,路由傳參中, path 最后的冒號可以寫可以不寫,前提是(以下是組件 componentA):

<router-link>中 params:{}這個對象中寫了, 寫與不寫的區別就是 不寫 在url地址欄中顯示或者不顯示; 但是在子組件中用 $router.params都可以找到;

以下為Apple子組件: 也可取出來 {{$route.params.color}}

 

如何在項目中使用第三個庫呢?

比如使用jquery,首先也是 npm install jquery@3.2.1 ;

在main.js(入口文件) import jquery from 'jquery'; 然后在一個組件中使用的時候  import jquery from "jquery"; 這樣jquery就是全局變量了;

也可這樣:比如使用百度的echarts庫:  在main.js引入:

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

在使用的時候就直接是 this.$echarts了,this指的是vue實例;

 

項目完成后用 npm run build可以打包項目; 打包配置在config文件夾下的 index.js 的 build對象下;如需在本里預覽, 

assetsPublicPath: './',改成相對路徑; 如果你的css文件中引用了background相對路徑,那么在打包后預覽后是會出現資源找不到的情況的;

 

可以在build文件夾的utils.js下:新增這個publicPath這個屬性;

 

 上述就是目前遇到的一些基本問題;

 

 

 

 

2020-02-26更新：

按需引入element-UI :

按需引入

借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

{

  "presets": [

    ["env", {

      "modules": false,

      "targets": {

        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

      }

    }],

    "stage-2"

  ],

  "plugins": ["transform-vue-jsx", "transform-runtime"]

}

將 .babelrc 修改為：

{

  "presets": [["es2015", { "modules": false }]],

  "plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

 

期間運行會報錯說 es2015沒有， npm執行  npm install babel-preset-es2015 --save-dev 

我在按需引入的時候沒有具體看文檔， 導致項目一系列稀奇古古怪的錯誤。。

 

如何防止沒有權限訪問頁面。

下圖可以更加嚴謹，獲取到tokenstr和，發起tokenStr到后台取校驗。是否合法。

 

 

 ------------------------------------------------------------------------------------------------------------------------分割線----------------------------------

最近發現新的vue工具更新了。以前的vue-cli是 2.9.6的。

現在的vue-cli名字變了。叫做 @vue/cli 

 

在 npm config set prefix “G:\node\nodejs\node_global”
npm config set cache “G:\node\nodejs\node_cache”

之后 ，發現安裝好 @vue/cli   cmd-》 vue沒反應。需要設置環境變量。 vue  值為 vue.cmd 所在的目錄。