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">