1 介紹

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

• Vue CLI是一個官方發布vue.js項目腳手架

• 使用vue-cli可以快速搭建vue開發環境以及對應的webpack配置。

• 使用vue-cli可以快速搭建vue開發環境以及對應的webpack配置

2 Vue CLI使用前提 Webpack

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

• 對所有的資源會壓縮等優化操作

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

Webpack全局安裝

npm install webpack -g

3 Vue CLI安裝

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

3.1 安裝腳手架3.x

安裝Vue腳手架（全局）

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

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

查看版本

vue --version

Vue CLI3.x初始化項目

vue create my-project

3.2 拉取腳手架2.x

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

npm install -g @vue/cli-init # `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同 vue init webpack my-project

Vue CLI2初始化項目

vue init webpack my-project

4 常用命令

打包項目

npm run build

運行項目

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代碼風格的工具，可以和編輯器搭配使用， // 如vscode的eslint插件 當有不符合配置文件內容的代碼出現就會報錯或者警告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', // 關掉語法檢查// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'} }

5 實戰

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

創建項目

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。