用vue-cli3快速搭建企业级后台应用管理权限系统

记录开发一套权限管理过程，非书籍不详细介绍

搭建环境

安装nodejavascript https://nodejs.org/en/

安装vue npm install vue

安装vue-cli3

 npm install -g @vue/cli
 //输出版本号
 vue -V

依赖配置失败解决方案

npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry

在 ~/.npmrc 加入下面内容，可以避免安装 node-sass 失败
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

.npmrc 文件位于
win：C:\Users\[你的账户名称]\.npmrc
linux：直接使用 vi ~/.npmrc



2、linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题

解决方案：

1. 单独安装：npm install --unsafe-perm node-sass 
2. 直接使用：npm install --unsafe-perm

创建项目

vue create project或者vue ui

vue使用npm install安装太慢连接不上

配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

踩坑此系统上禁止运行脚本

vue : 无法加载文件 C:\Users\Admin\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 http://go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

以管理员命令打开输入set-ExecutionPolicy RemoteSigned,然后输入Y就可以了

Vue CLI v4.5.4
? Please pick a preset:
  mangoiview ([Vue 2] node-sass, babel, router, vuex, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features   手动选择

Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Choose Vue version  //选择版本
 (*) Babel   //转义一些ES6，es7语法
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router  //路由
 (*) Vuex  // vuex状态管理
 (*) CSS Pre-processors  //css预处理
 (*) Linter / Formatter   //eslint代码规范
 ( ) Unit Testing
 ( ) E2E Testing

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)   // 选择版本3

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N   //一般情况选择哈希模式需要和后端配置

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): //styles样式 (with node-sass)   
? Pick a linter / formatter config: Prettier  
? Pick additional lint features:   //格式化并且保存 Lint on save  
? Where do you prefer placing config for Babel, ESLint, etc.?   //使用独立配置文件 In dedicated config files 
? Save this as a preset for future projects? (y/N)   //保存配置文件 y  

? Save this as a preset for future projects? Yes   // 保存预设
? Save preset as: vue3cliconfigure  //保存文件名

踩坑出现安装失败错误

可以参考 https://blog.csdn.net/qq_39573631/article/details/89158531

或者重装下vue，如果还不行吧重装vue cli预设，sass改成stylues。

npm uninstall -g vue
npm uninstall -g vue-cli
npm uninstall -g @vue/cli
npm cache clean --force
npm install -g vue
npm install -g @vue/cli

gyp ERR! node -v v12.18.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Roaming\npm-cache\_logs\2020-08-26T12_40_25_597Z-debug.log
 ERROR  command failed: npm install --loglevel error

不搞eslint这部可以不要

下载vscode eslint 规格格式化代码

vscode 下载ESlint、 Prettier。
Vetur 这是vue高亮插件

设置eslint选项

打开 文件>首选项 >设置

{
     
    "window.zoomLevel": 0,
    "eslint.codeAction.disableRuleComment": {
     
        
    
    },
    //保存自动格式化代码
    "eslint.autoFixOnSave":true,
   "eslint.validata":[
       "javascript",
       "javascriptreact",
       {
     
           "language":"vue",
           "autoFix":true
   }]
}

npm run lint 可以修复自动格式问题

安装element依赖和axios

element插件地址https://element.eleme.cn/#/zh-CN/component/installation

npm i element-ui -S
npm i axios -S

引入element

//main.js

Vue.use(ElementUI);
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

路由跳转

路由

//路由跳转

<router-link to:"/home"> home </router-link> 

methods:{
     
this.router.push({
     path:"/index"})
}

两种引入方法

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// 第一种方法引入
@是指定src目录
// import Login from '@/components/Login'  
//import Login from '../components/Login.vue'
Vue.use(VueRouter)


{
     
    path: '/',
    name: 'Login',
    // component: Home
    redirect:'/login'
  },
  {
     
    path: '/about',
    name: 'About',
    
//这种是无需导入模块，直接延迟加载导入
    component: () => import('../views/About.vue')
  }