VUE入門實踐（1）

一、簡介

Vue.js（讀音 /vjuː/, 相似於 view） 是一套構建用戶界面的漸進式框架。

Vue 只關注視圖層， 採用自底向上增量開發的設計。

Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。

二、環境準備

2.一、Node.js安裝(npm)

官網地址：

https://nodejs.org/en/download/
複製代碼

下載本身的版本，下載完成以後雙擊安裝，在配置環境變量path，根據本身的安裝路徑配置便可

配置完成後，檢查Node.js版本

node --version
複製代碼

NPM是隨同NodeJS一塊兒安裝的包管理工具

• 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
• 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

因爲新版的nodejs已經集成了npm，因此以前npm也一併安裝好了。一樣能夠經過輸入 "npm -v" 來測試是否成功安裝。命令以下，出現版本提示表示安裝成功:

因爲 npm 安裝速度慢，也可使用淘寶的鏡像及其命令 cnpm，安裝命令以下

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製代碼

# 查看版本
$ npm -v


#升級 npm
cnpm install npm -g


# 升級或安裝 cnpm
npm install cnpm -g
複製代碼

在用 Vue.js 構建大型應用時推薦使用 NPM 安裝

2.二、VUE安裝

最新穩定版安裝：

npm install vue
複製代碼

Vue.js 提供一個官方命令行工具（vue-cli，這裏注意安裝的是3.x的版本，與2.x的有差別），也叫腳手架

全局安裝 vue-cli：

npm install -g @vue/cli
複製代碼

你還能夠用這個命令來檢查其版本是否正確 (3.x)：

vue -V
複製代碼

這樣VUE以及腳手架就安裝完成了。

2.三、建立VUE項目

vue create my-project
複製代碼

詢問安裝類型，按鍵盤上下鍵選擇默認（default安裝了balel、eslint其他要用什麼，須要手動再安裝）仍是手動（Manually）,此處選擇手動。

上面顯示的v1.0 是我上一次建立時的配置，選好回車

詢問項目的需求，上下鍵切換，空格選擇，回車確認，選擇一些會用到的便可。

詢問項目的路由模式是否使用History，選擇是，而後接下來會進行一些列的配置詢問，本身看着須要選擇就好了

等待項目建立成功，一些配置文件的做用

|-- .eslintrc.js # ES-lint校驗
|-- .gitignore # git忽略上傳的文件格式
|-- babel.config.js # babel語法編譯
|-- package.json # 項目基本信息 |-- postcss.config.js # CSS預處理器(此處默認啓用autoprefixer)

用編輯器打開項目看一下項目目錄結構

vue.config.js配置文件

vue.config.js是一個可選的配置文件，若是項目的根目錄存在這個文件，那麼它就會被 @vue/cli-service 自動加載。你也可使用package.json中的vue字段，但要注意嚴格遵照JSON的格式來寫。這裏使用單獨配置vue.config.js的方式。

參考配置以下：

// vue.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
  // baseUrl從vue cli 3.3起已經棄用了，用publicPath來代替
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 部署應用包時的基本URL(這裏能夠看一下官方說明)
  outputDir: 'dist', // 打包時生成的生產環境構建穩健的目錄
  assetsDir: 'static', // 放置生成的靜態資源的目錄
  filenameHashing: true,
  lintOnSave: true, // eslint-loader會將lint錯誤輸出爲編譯警告
  productionSourceMap: false, // 若是你不須要生產環境的source map，能夠將其設置爲false，以加速生產環境的構建
  configureWebpack: {
    // 簡單/基礎配置，好比引入一個新插件
    plugins: []
  },
  chainWebpack: config => {
    // 鏈式配置
  },
  css: {
    // css預設器配置項
    loaderOptions: {
      css: {
 
      },
      postcss: {
 
      }
    }
  },
  devServer: {
    open: true,
    host: '127.0.0.1',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null,
    // proxy: {
    //     '/api': {
    //         target: '<url>',
    //         ws: true,
    //         changOrigin: true
    //     }
    // },
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {}
}
複製代碼

運行項目，項目建立完成以後也會提示咱們啓動命令

進入項目目錄運行，訪問127.0.0.1:8080 進入主頁面

npm run serve
複製代碼

一個簡單的VUE項目就建立完成了。