vue在代码编译后自动打开浏览器:
vue关闭自带的Eslint规范
在vue项目中配置@指向src
用法:import HelloWorld from '@/components/HelloWorld.vue'
vue.config.js配置方法如下:
//安装path模块
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports={
devServer:{},
chainWebpack: (config) => {
config.resolve.alias
.set("@", resolve("src"))
.set("@u", resolve("src/utils"));
},
}
项目中清除默认样式
或者
安装路由
npm install vue-router
配置路由
src/router/index.js
// 配置路由的地方
import Vue from 'vue'
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)
// 引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
// 配置路由
export default new VueRouter({
// 配置路由
routes: [
{
path: '/home',
component: Home
},
{
path: '/search',
component: Search
},
// 重定向,在项目跑起来的时候访问/,立马让他定向到首页
{
path: '*',
redirect:'/home'
}
]
})
注册路由
src/main.js
import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'
new Vue({
el: "#app",
// 注册路由
router,
render: h=> h(App)
})
配置路由出口
src/App.vue
<template>
<div id="app">
<HelloWorld/>
// 配置路由出口
<router-view></router-view>
</div>
</template>
package.json分析:
1.2.2大版本.次要版本.小版本
"^3.6.5”不能低于3.6.5,不能修改大版本号
"~4.5.0”不能低于4.5.0,不能修改大版本号和次要版本号
package.json文件中devDependencies和dependencies的区别
dependencies,依赖的意思,这些安装包都是程序所依赖的包,需要发布到生产环境的.dev即develop,开发的意思,也就是开发环境下的依赖。
例如安装axios
安装到开发环境npm axios --save-dev
安装到生产环境 npm axios --save
区别:
devDependencies中的插件只用于开发环境,不用于生产环境,而dependencies是要发布到生产环境的。比如babel有关的转化es6到es5的依赖只是开发环境下转化用,生产过程中是用不到,所以只用写在devDependencies中,而像vue或element-ui这种实际运行会调用,得写在dependencies中。
如图:
vue.config.json配置前端打开的端口号以及编译好后自动打开浏览器
module.exports={
devServer: {
port: 8088, // 自定义端口号
host: 'localhost',
open: true // 编译好后自动打开浏览器
}
}