Vue 脚手架CLI 初始化项目
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` 的运行效果将会跟 `[email protected]` 相同
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 files
plugins: [
'vue'
],
// add your custom rules here
rules: {
"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 = false
new 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