npm install -g @vue/cli 安装vue3.0 vue create ‘项目名字’ 淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org npm install glob --save-dev 安装全局包
先看下项目结构 删除了一些配置增加了vue.config.js文件
const glob = require('glob');//下载glob包 function getEntry(globPath) { let pages = {}; glob.sync(globPath).forEach(filepath => { let fileList = filepath.split('/'); let fileName = fileList[fileList.length - 2]; pages[fileName] = { //入口文件 entry: `src/pages/${fileName}/app.js`, // 模板来源 template: `src/pages/${fileName}/index.html`, // 在 dist/index.html 的输出 filename: fileName === "/" ? "index.html" : `${fileName}/index.html`, // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', fileName] } }) return pages } let pages = getEntry('./src/pages/*/*.js'); module.exports = { pages, css: { modules: false, sourceMap: false, loaderOptions: { sass: { data: `@import "@/assets/css/_variables.scss"; @import "@/assets/css/menu.scss"; @import "@/assets/css/icon.scss"; @import "@/assets/css/mixin.scss";` } } }, chainWebpack: config => { let arr = ["console", "home", "index", "rsp", "ssp"]; arr.forEach((v) => {//不让在空余的时间加载其他资源 config.plugins.delete(`prefetch-${v}`) config.plugins.delete(`preload-${v}`) }) }, lintOnSave: false, productionSourceMap: false, }新建的pages文件夹里面 这是每个页面。每个下面都有路由 页面在views里面 下面是app.js的文件
require('@/common/functions'); import 'babel-polyfill' import Vue from 'vue' import App from './App.vue' import router from './router/index.js' import store from './store/index.js' //api挂载vue import api from '@/api/install' Vue.use(api) //vue使用element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); //引用全局样式 import '@/assets/css/app.scss'; //引用过滤器 import * as filters from '@/filters/index' Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }); new Vue({ router, store, render: h => h(App) }).$mount('#app')package.json 大多项目需要的依赖
{ "name": "lsp_front", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit" }, "dependencies": { "axios": "^0.18.0", "babel-polyfill": "^6.26.0", "core-js": "^2.6.5", "element-ui": "^2.8.2", "mockjs": "^1.0.1-beta3", "node-sass": "^4.12.0", "sass-loader": "^7.1.0", "sass-resources-loader": "^2.0.0", "vue": "^2.6.10", "vue-cropper": "^0.4.9", "vue-router": "^3.0.3", "vuex": "^3.1.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.7.0", "@vue/cli-plugin-eslint": "^3.7.0", "@vue/cli-service": "^3.7.0", "babel-eslint": "^10.0.1", "cross-env": "^5.2.0", "eslint": "^5.16.0", "eslint-loader": "^2.1.2", "eslint-plugin-vue": "^5.0.0", "increase-memory-limit": "^1.0.7", "vue-template-compiler": "^2.5.21" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ] }仔细看官方文档 https://cli.vuejs.org/zh/config/#全局-cli-配置
