vue — 建立vue項目

建立vue項目

在程序開發中，有三種方式建立vue項目，本地引入vuejs、使用cdn引入vuejs、使用vue-cli建立vue項目。其中vue-cli能夠結合webpack打包工具使用，大大方便了開發步驟，使用普遍。

vue本地引用

在官網下載vue.js，經過script標籤引入。
開發版本：https://vuejs.org/js/vue.js 包含完整的警告和調試模式
生產版本：https://vuejs.org/js/vue.min.js 刪除了警告，30.90KB min+gzip
注意：在開發環境下不要使用壓縮版本，否則你就失去了全部常見錯誤相關的警告！ vue.min.js，這是一個更小的構建，能夠帶來比開發環境下更快的速度體驗。

經過cdn方法引用

• jsdelivr，連接到一個你能夠手動更新的指定版本號。能夠在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。
  <script src="https://cdn.jsdelivr.net/npm/...;></script>
• unpkg 
  unpkg：https://unpkg.com/vue/dist/vu... 會保持和 npm 發佈的最新的版本一致。（推薦使用）
• cdnjs 版本更新可能略滯後
  <script src="https://cdnjs.cloudflare.com/...;></script>
• BootCDN（國內）國內不穩定
  https://cdn.bootcss.com/vue/2...

NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。

1. nodejs安裝
   從node.js官網(https://nodejs.org/en/) 下載並安裝node，安裝過程很簡單，一直點下一步就ok了，安裝完以後，咱們經過打開命令行工具（win+R）,輸入node -v 命令，查看node的版本，若出現相應的版本號，則說明你安裝成功了。
   你能夠根據不一樣平臺系統選擇你須要的Node.js安裝包。

    

   npm包管理器，是集成在node中的，因此安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本信息。

2. 安裝淘寶鏡像庫
   若是訪問外網比較慢，可使用淘寶的鏡像 https://npm.taobao.org/
   打開命令終端 npm install -g cnpm --registry=https://registry.npm.taobao.org
   安裝成功以後，就能夠用 cnpm 替代 npm

    

3. 安裝vue-cli

   npm install -g vue-cli / cnpm i -g vue-cli 安裝結束以後，使用vue -v查看vue的版本。 

安裝成功以後，vue環境就部署成功了，接下來就可使用npm方式建立項目框架了。

使用vue-cli建立項目

步驟：

• 選擇項目所在的位置，經過命令行進入該目錄（或者直接在該目錄，右鍵，打開命令行）。
• 使用腳手架安裝項目： vue init webpack demo 項目是基於webpack的
  Project name（工程名）:回車
  Project description（工程介紹）：回車
  Author：做者名
  Vue build（是否安裝編譯器）:回車
  Install vue-router（是否安裝Vue路由）：回車
  Use ESLint to lint your code（是否使用ESLint檢查js代碼）：n
  Set up unit tests（安裝單元測試工具）：n
  Setup e2e tests with Nightwatch（是否安裝端到端測試工具）：n
  Should we run npm install for you after the project has been created? (recommended)：回車。

啓動項目

• 進入項目目錄：cd demo
• 安裝項目所須要的依賴：npm install
• 啓動項目：npm run dev

啓動成功，瀏覽器打開：localhost:8080，便可看到vue項目。

vue目錄結構

 

package.json

引入vuex

　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

　　安裝 npm install vuex -save

引入axios

       npm install axios --save-dev,

　　npm install qs;

引入sass (預編譯工具)

　　npm install node-save-dev,

　　npm install sass-loader --save-dev

引入 elementUI

　　npm install element-ui-save

　　而後在main.js中引入使用

  import Vue from 'vue'
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  import App from './App.vue'

  Vue.use(ElementUI)

 

問題

　　Expected indentation of 4 spaces but found 6  //預期縮進4個空格，但發現6個

　　項目初始時，默認安裝ESLint（ESLint是一個語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼）的緣由，

　　關閉ESLint方法： 在vue項目中找到build文件夾 --> webpack.base.conf.js --> module

 

　　module: {
　　　　rules: [
　　　　// 把 eslint 關閉
　　　　// ...(config.dev.useEslint ? [createLintingRule()] : []),
　　　　{
　　　　　　test: /\.vue$/,
　　　　　　loader: 'vue-loader',
　　　　　　options: vueLoaderConfig
　　　　},
　　　　{
　　　　　　test: /\.js$/,
　　　　　　loader: 'babel-loader',
　　　　　　include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
　　　　},

　　而後從新啓動 npm run  dev       (npm  start)