1 介紹

• CLI是Command-Line Interface，翻譯為命令行界面，但是俗稱腳手架。

• Vue CLI是一個(gè)官方發(fā)布vue.js項(xiàng)目腳手架

• 使用vue-cli可以快速搭建vue開發(fā)環(huán)境以及對應(yīng)的webpack配置。

• 使用vue-cli可以快速搭建vue開發(fā)環(huán)境以及對應(yīng)的webpack配置

2 Vue CLI使用前提 Webpack

Vue.js官方腳手架工具就使用了webpack模板

• 對所有的資源會(huì)壓縮等優(yōu)化操作

• 它在開發(fā)的過程中提供了一套完整的功能，能夠使得我們開發(fā)過程變得高效

Webpack全局安裝

npm install webpack -g

3 Vue CLI安裝

https://cli.vuejs.org/zh/guide/

3.1 安裝腳手架3.x

安裝Vue腳手架（全局）

# 腳手架3.x（后面拉一個(gè)模板就能用2） npm install -g @vue/cli

注意：上面安裝的是Vue CLI3的版本，如果需要按照Vue CLI2的方式初始化項(xiàng)目時(shí)不可以的

查看版本

vue --version

Vue CLI3.x初始化項(xiàng)目

vue create my-project

3.2 拉取腳手架2.x

拉取腳手架2.x官方教程

npm install -g @vue/cli-init # `vue init` 的運(yùn)行效果將會(huì)跟 `vue-cli@2.x` 相同 vue init webpack my-project

Vue CLI2初始化項(xiàng)目

vue init webpack my-project

4 常用命令

打包項(xiàng)目

npm run build

運(yùn)行項(xiàng)目

npm run serve

6 其他常用文件

.editorconfig

# 編輯器配置 root = true[*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true

.eslintrc

// https://eslint.org/docs/user-guide/configuring // eslint是用來管理和檢測js代碼風(fēng)格的工具，可以和編輯器搭配使用， // 如vscode的eslint插件 當(dāng)有不符合配置文件內(nèi)容的代碼出現(xiàn)就會(huì)報(bào)錯(cuò)或者警告module.exports = {root: true,parserOptions: {parser: 'babel-eslint'},env: {browser: true,},extends: [// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.'plugin:vue/essential',// https://github.com/standard/standard/blob/master/docs/RULES-en.md// 'standard'],// required to lint *.vue filesplugins: ['vue'],// add your custom rules hererules: {"no-unused-vars": 'off', // 關(guān)掉語法檢查// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'} }

5 實(shí)戰(zhàn)

• "vue": "^2.6.11"( package.json中 )
• @vue/cli 4.5.15( vue -V 查看 )

創(chuàng)建項(xiàng)目

vue create my-project

修改 package.json

"dependencies": {// 修改下面"vue": "^2.6.11", }, "devDependencies": {// 修改下面"vue-template-compiler": "^2.6.11" }

修改main.js

import Vue from 'vue' import App from './App.vue' import router from './router'// 餓了么 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({router,render: h => h(App), }).$mount('#app')

router/index.js

import Vue from 'vue' import VueRouter from 'vue-router'// import Test from "../views/Test";Vue.use(VueRouter)const routes = [// component: () => import('../views/Ajax.vue'){path: '/',name: 'Test',component: () => import('../views/Test.vue')} ]const router = new VueRouter({// mode: 'history',base: process.env.BASE_URL,routes })export default router

7 第三方安裝

vue-router

npm install --save vue-router

axios

npm install --save axios

餓了么

npm i element-ui -S npm install --save element-ui

echarts
Vue引用echarts圖表

npm install echarts --save

原文：https://www.920vip.net/article/162

總結(jié)

以上是生活随笔為你收集整理的Vue 脚手架CLI 初始化项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。