vue 創(chuàng)建項(xiàng)目步驟

1. 安裝 vue 腳手架

1.  npm install -g @vue/cli  或者  cnpm install -g @vue/cli
2.  npm install vue  -g

// 查看版本號(hào)
vue -V

// 這里 2.x 是 舊版本   3.x 是新版本

2. 創(chuàng)建 Vue 項(xiàng)目 命令行創(chuàng)建 Vue 項(xiàng)目

vue create my-project

1. 選擇`Manually select features`(選擇特性以創(chuàng)建項(xiàng)目)
2. 勾選特性可以用空格進(jìn)行勾選。
(a).Bable(b)Router(c)Linter/Formatter(d)Vuex
3. 選擇 vue 的版本  2.x(引入 ElementUi) // 3.x  引入 ElementUi 組件有兼容性問題
4. Use history mode for router? (是否選用歷史模式的路由)：n
5. ESLint選擇：`ESLint + Standard config`
6. 何時(shí)進(jìn)行ESLint語(yǔ)法校驗(yàn)：`Lint on save`
7. babel，postcss等配置文件如何放置：`In dedicated config files`(單獨(dú)使用文件進(jìn)行配置)
8. Save this as a preset for futrue projects(是否保存為模板)：n
9. 使用哪個(gè)工具安裝包：npm    

創(chuàng)建項(xiàng)目完成后  cd my-project   npm run serve 讓項(xiàng)目運(yùn)行起來

3. 圖形化創(chuàng)建 Vue 項(xiàng)目

vue ui

在圖形化里面選擇 屬性  創(chuàng)建 Vue 項(xiàng)目

4. 創(chuàng)建 vue 2.x 版本的 vue 項(xiàng)目

npm install -g @vue/cli-init

// 創(chuàng)建 veu 2.x 版本的項(xiàng)目
vue init webpack my-project

1. Project name  默認(rèn)
2. Project description 默認(rèn)
3. Author  wqx
4. Vue build runtime-only  選擇精簡(jiǎn)版
5. Install vue-router?  y
6. Use ESLint to lint your code? y
7. Pink an ESLint preset    Standard
8. Set up unit tests     n
9. Setup e2e tests with Nightwatch?  n
10. Should we run npm install for you after the project has been created?  Yes, use NPM

然后 cd my-project  npm run dev 運(yùn)行項(xiàng)目

5. Vue腳手架的自定義配置

A.通過 package.json 進(jìn)行配置 [不推薦使用]
    "vue":{
        "devServer":{
            "port":"9990",
            "open":true
        }
    }
B.通過單獨(dú)的配置文件進(jìn)行配置，創(chuàng)建vue.config.js
    module.exports = {
        devServer:{
            port:8888,
            open:true
        }
    }

6. Element-UI的基本使用

A.安裝：
    npm install element-ui -S  或者  cnpm install element-ui -S
B.導(dǎo)入使用：
    // 引入 ElementUI 組件  main.js 文件中
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)