vue项目基础配置

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 // 编译好后自动打开浏览器
	}
}