初始化 vue3.0 项目

[TOC] > [参考](https://juejin.im/post/5caab6f0f265da24c1118d90?utm_source=tuicool&utm_medium=referral#heading-1) ## 安装vue3.0 ``` yarn global add @vue/cli or cnpm install -g @vue/cli or npm install -g @vue/cli vue --version vue create vue-project ``` 设置完可对自己的设置取名, ## vue ui 通过vue ui 进行配置 ## 启动本地服务器 ``` npm run serve or yarn serve ``` ## 监听 ESlint 查看监听 `软件->phpstorm->保存监听 eslint` ## 配置 env 环境变量 在根目录下 .env ``` NODE_ENV="development" //开发环境 BASE_URL="http://localhost:3000/" //开发环境接口地址 ``` .env.prod ``` NODE_ENV="production" //生产环境 BASE_URL="url" //生产环境的地址 ``` ## 配置 vue.config.js > [配置详情](https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F) ``` let path=require('path'); function resolve(dir){ return path.join(__dirname,dir) } module.exports = { chainWebpack: config => { //设置别名 config.resolve.alias .set('@',resolve('src')) }, devServer: { open:true //打开浏览器窗口 }, //定义scss全局变量 css: { loaderOptions: { sass: { data: `@import "@/assets/scss/global.scss";` //需要自己创建文件,每个文件都会映入 } } } } ``` ## ElementUI引入 `vue add element` 选中选第一个 ## vue-router路由介绍 ``` const getComponent = (name,component) => () => import(`@/views/${name}/${component}.vue`); const myRouter=new Router({ routes: [ { path: '/', redirect: '/home', component: getComponent('login','index'), meta:{title:'自定义图标'} }, ] }) ``` ## axios引入并封装 `vue add axios` > [配置](https://juejin.im/post/5caab6f0f265da24c1118d90?utm_source=tuicool&utm_medium=referral#heading-7)