Vue.js官方脚手架工具就使用了webpack模板
Webpack全局安装
npm install webpack -g
https://cli.vuejs.org/zh/guide/
安装Vue脚手架(全局)
# 脚手架3.x(后面拉一个模板就能用2)
npm install -g @vue/cli
注意:上面安装的是Vue CLI3的版本,如果需要按照Vue CLI2的方式初始化项目时不可以的
查看版本
vue --version
Vue CLI3.x初始化项目
vue create my-project
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
Vue CLI2初始化项目
vue init webpack my-project
打包项目
npm run build
运行项目
npm run serve
.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'
}
}
"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
vue-router
npm install --save vue-router
axios
npm install --save axios
饿了么
npm i element-ui -S
npm install --save element-ui
echarts
npm install echarts --save
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。