一.安裝:

安裝vue-cli3.0
npm install -g @vue/cli

查版本是否安裝成功
vue -V

二.創(chuàng)建項目

vue create 項目名

1.選擇模板

按鍵盤上下鍵選擇默認（default）還是手動（Manually）周偎，如果選擇default虱朵，一路回車執(zhí)行下去就行了蛮穿，這里我選擇手動Manually

Vue CLI v4.4.4
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.4.4 → 4.4.6   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset:
  default (babel, eslint)
> Manually select features

2.選擇配置

根據你的項目需要來選擇配置,空格鍵是選中與取消，A鍵是全選

? Check the features needed for your project:
// 檢查項目所需的功能:(按<space>選擇驻呐，<a>切換所有灌诅，<i>反轉選擇）
 (*) Babel                                        //利用babel就可以讓我們在當前的項目中隨意的使用這些新最新的es6，甚至es7的語法含末。說白了就是把各種javascript千奇百怪的語言統(tǒng)統(tǒng)專為瀏覽器可以認識的語言延塑。
 ( ) TypeScript                                // 支持使用 TypeScript
 ( ) Progressive Web App (PWA) Support        // PWA 支持
 (*) Router                                    // 支持 vue-router
 (*) Vuex                                      // 支持 vux
>(*) CSS Pre-processors                       // 支持 CSS 預處理器。
 (*) Linter / Formatter                      // 支持代碼風格檢查和格式化答渔。
 ( ) Unit Testing                              // 支持單元測試关带。
 ( ) E2E Testing

3.是否使用路由的 history 模式：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
:
// 選擇CSS預處理器（默認支持PostCSS，Autoprefixer和CSS模塊）：
  Sass/SCSS (with dart-sass)                 //  保存后才會生效
> Sass/SCSS (with node-sass)                //  自動編譯實時的
  Less
  Stylus

4.選擇Eslint代碼驗證規(guī)則：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
: Sass/SCSS (with node-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

5.選擇什么時候進行代碼規(guī)則檢測：

建議選保存就檢測沼撕，等到commit的時候宋雏，問題可能都已經積累很多了。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert
 selection)
>(*) Lint on save                     // 保存就檢測
 ( ) Lint and fix on commit          // fix和commit時候檢查

8.把babel,postcss,eslint這些配置文件放哪：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files              // 獨立文件放置
  In package.json                        // 放package.json里

6.保存配置

? Save this as a preset for future projects? Yes   // 是否記錄一下以便下次繼續(xù)使用這套配置
// 選保存之后务豺，會讓你寫一個配置的名字：
? Save preset as: divconf    // 然后你下次進入配置可以直接使用你這次的配置了

三.基礎配置

框架已經搭建好了,但是還缺少配置項,加入css嵌套,axios,Element等方便快速開發(fā).

1.經過上面的css預編譯配置,默認支持css嵌套

<style lang = "scss" scoped>     //加上lang="scss",scoped代表此css只對當前組件生效,但是不建議加,會有影響,具體百度
.home{
  img{
    &:nth-child(1){
      width: 300px;
    }
  }
}
</style>

2.引入axios

cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

npm:

1.安裝axios
npm install --save axios
2.在main.js中引入axios
import axios from 'axios'
3.將axios設置給Vue的原型對象
Vue.prototype.axios = axios
4.需要使用axios的位置

this.axios
        .get("url", {
          params: {
            index: index,
          },
        })
        .then((res) => {
          console.log(res.data.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },

this.axios
        .post('url',{page:this.page},{
                        emulateJSON:true
                        }).then(result =>{
                        console.log(result.body.rows)
                        })

3.使用ElementUI框架
npm i element-ui -S

在mian.js下面加入下面內容,就可以直接在組件中使用ElementUI了

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)

4.vue中引入JQ
npm install jquery --save-dev
在需要用到的地方引入 import $ from 'jquery'

注意:JQ代碼要寫到counted中,否則不生效

jq示例

最后編輯于：2020.08.17 11:22:20

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者