1、安裝 vuecli
   須知：4.0 的cli安裝須要，卸載以前的cli 不管是3.0 仍是2.0的，都須要卸載
   卸載舊版本的cli命令：javascript

npm uninstall vue-cli -g 或 yarn global remove vue-cli

2、Node 版本要求
    Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。
    你可使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。css

3、安裝新的cli 4.0版本
   html

npm install -g @vue/cli
    # or
   yarn global add @vue/cli

安裝以後，用這個命令來檢查其版本是否正確的命令：
 vue

  vue --version

這樣的提示是正確的：
    $ vue --version
    @vue/cli 4.0.5java

4、快速原型開發
   使用 vue serve 和 vue build 命令對單個 *.vue 文件進行快速原型開發，
   不過這須要先額外安裝一個全局的擴展：命令以下：
   webpack

npm install -g @vue/cli-service-global

vue serve 的缺點：
   就是它須要安裝全局依賴，
   這使得它在不一樣機器上的一致性不能獲得保證。所以這隻適用於快速原型開發web

你所須要的僅僅是一個 App.vue 文件：vue-cli

<template>
  <h1>Hello!</h1>
</template>
而後在這個 App.vue 文件所在的目錄下運行：npm

vue serve
vue serve 使用了和 vue create 建立的項目相同的默認設置 (webpack、Babel、PostCSS 和 ESLint)。
它會在當前目錄自動推導入口文件——入口能夠是 main.js、index.js、App.vue 或 app.vue 中的一個。
你也能夠顯式地指定入口文件：json

vue serve MyComponent.vue
若是須要，你還能夠提供一個 index.html、package.json、
安裝並使用本地依賴、甚至經過相應的配置文件配置 Babel、PostCSS 和 ESLint。

5、建立一個項目
#vue create
運行如下命令來建立一個新項目：
 

 vue create hello-world 

hellow-world是項目的名稱，能夠本身定義；
6、使用圖形化界面
你也能夠經過 vue ui 命令以圖形化界面建立和管理項目：

    vue ui

7、開發運行命令：

npm run server

8、 去掉代碼嚴格模式

我這裏提供一種方法：去修改package.json  裏的rules：

"rules": {
      "generator-star-spacing": "off",
      "no-tabs": "off",
      "no-unused-vars": "off",
      "no-console": "off",
      "no-irregular-whitespace": "off",
      "no-debugger": "off"
    },

以上方法並無徹底的去除eslint 校驗代碼 嚴格模式

vue-cli 取消eslint 校驗代碼 真正的解決辦法 ：

解決方法：

找到文件  vue.config.js  （備註我這裏是vue-cli3.0）打開文件

修改lintOnSave 爲false，若是沒有就添加lintOnSave 爲false

下圖:

完美了：

9、npm run server  自動打開瀏覽器

在目錄config——>index.js中修改以下設置：

autoOpenBrowser: true,

 本來是false,改成true便可；

若是是vue-cli4.0，則須要在package.json中調整配置

須要在package.jason  裏 scripts：

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

10、 vue-cli生成項目地址去掉#號

vue的路由在默認的hash模式下,url會帶有一個#
去掉的話加上mode: 'history', 板成history模式就能夠了

 若是改變以後樣式出現問題能夠把./換成/

修改前：
<link rel="stylesheet" href="./static/css/base.css">
修改後：
<link rel="stylesheet" href="/static/css/base.css">