VUE知识整理---vue-cli

太难了我不会
161 阅读3分钟

Vue-cli脚手架

Vue-cli单文件组件

  • 安装
npm install -g @vue/cli

输入vue -V 如不能执行需配置全局命令
我的电脑-右键-属性-高级系统设置-环境变量-系统变量-Path-添加全局node_modules/vue的绝对路径到Path里
例：
  在cmd中 npm root -g // C:\Users\admin\AppData\Roaming\npm\node_modules
  新增变量：C:\Users\admin\AppData\Roaming\npm
  • 创建项目
vue create vue-cli-demo1  // create后面是项目名称
选择default安装默认依赖
选择Manually select features自定义配置
选择配置项
  按空格键选择，a全选，i全返选，回车确认
  babel  // 解决兼容性问题
  TypeScript  // 给js添加特性的语言扩展
  Processive Web App (PWA) Support  // 渐进式Web应用程序支持
  Router  // vue-router路由
  Vuex  // 状态管理模式
  CSS Pre-processors  // Sass/Less预处理器
  Linter / Formatter  // 支持代码风格检查和格式化
  Unit Testing  // 支持单元测试
  E2E Testing  // 支持E2E测试
是否使用历史路由：yes
选择css预处理器：Sass/SCSS（with dart-sass）
选择ESLint配置项：ESLint+Prettier
语法检测方式：Lint on save
配置文件的存储方式：
  In dedicated config files  // 把配置项抽取成独立的文件
  In package.json  // 配置项统一保存到package.json里
  是否保存以上配置记录生成文件：  // 保存记录后再创建项目时会有c1的配置选项
  Yes  // 记录文件地址在C:/Users/Administrator/.vuerc
命令：
  npm run serve  // 启动项目 默认地址：http://localhost:8080/
  // 在package.json中："serve": "vue-cli-service serve",
  npm run build2  // 以生产模式打包项目  "build2": "vue-cli-service build --mode development"
  npm run build  // 以生产模式打包项目  "build": "vue-cli-service build",
  npm run lint  // 格式化代码 "lint": "vue-cli-service lint"
  npm run inspect  // 审查webpack.config.js配置代码  "inspect":"vue-cli-service inspect"
常用依赖包：
  npm install pubsub-js --save  // PubSub兄弟组件通信
  npm install axios --save  // axios发送ajax
  npm install jquery --save  // jquery
  npm install view-design --save  // iview
    import ViewUI from 'view-design';
    import 'view-design/dist/styles/iview.css';

Vue-cli项目目录解析

  • Vue-cli项目目录解析
public：静态资源目录，打包时不会重命名文件
src：开发目录
  assets：静态文件目录，打包时会重命名文件 // 例 在app.vue中 <img src="./assets/logo.png">
  components：组件目录
  router/router.js：路由配置文件
    mode: "history",  // 历史路由，可以删掉
    base: process.env.BASE_URL,  // 基础路径，默认为/
  app.vue：根组件
  main.js：核心入口文件
    // Vue.config.productionTip = false时错误日志会更详细，指定到具体的行
    // 可以改为Vue.config.productionTip = process.env.NODE_ENV === 'production';表示开发环境时为false，生产环境时为true
  .browserslistrc：可兼容的游览器范围，对应package.json的browserslist选项
  .eslintrc.js：eslint相关配置
  .gitignore：git提交忽略文件的配置
    .DS_Store  // 不上传的目录
    node_modules
  babel.config.js：babel的配置，即ES6语法的编译配置
  package-lock.json：锁定依赖包的版本
  package.json：项目基本信息
  postcss.config.js：css编译工具

自定义全局CLI配置

创建vue.config.js文件： 
  const name = defaultSettings.title || '集运管理后台' // page title
  module.exports={
 	publicPath:'/',  // 公共路径，当类似www.xxx.com/demo访问时，可以配置为'/demo'
    devServer:{  // 开发环境配置，和webpack中的配置方法一样
    port:8080,  // 热部署端口号
    host:'localhost',  // 主机名，127.0.0.1，真机：0.0.0.0
    https:false,  // https协议 
    open:true,  // 启动服务时自动打开浏览器
    proxy: { ... }  // 代理服务器配置
    }
  }
  configureWebpack:{
    name: name,
    alias: {
    	'@': resolve('src')  // 或者 '~': resolve(__dirname, 'src')
    }
  }
  lintOnSave:false,  // false表示关闭lint格式错误提示
  outputDir:"dist",   // 打包目录
  assetsDir:"assets",  // 相对于outputDir的静态资源输出路径
  indexPath:"index.html",  // 相对于outputDir的index.html输出路径 
  productionSourceMap:false,  // 打包时不生成.js.map文件，加快打包速度
  filenameHashing:false  / 打包的文件名不生成哈希值，一般不用配置此项
avatar
文章
阅读
粉丝