【Vue技术栈开发基础指南】

Vue前端开发框架

Vue-Cli项目脚手架 基于vue.js进行快速开发的完整系统

文档地址 https://cli.vuejs.org/zh/

1. 安装node.js https://nodejs.org/zh-cn/
2. 安装vue-cli脚手架

npm install -g @vue/cli

3. 创建一个vue项目

执行命令 vue create hello-world(项目名) 快速创建一个vue项目

1) 执行命令后会提示你选择什么样的预先配置，我们选择Manually select features 手动选择配置
2) Check the features needed for your project 空格选中需要的元素
     (*) Choose Vue version  // 选择vue版本
     (*) Babel // javascript语法编译器
     ( ) TypeScript
     ( ) Progressive Web App (PWA) Support
     (*) Router // vue-router路由管理器
     (*) Vuex  // 状态管理器
    >(*) CSS Pre-processors // 选择CSS预处理器
     (*) Linter / Formatter // 选择格式化和校验规则
     ( ) Unit Testing

4. 启动项目 在终端使用命令运行，查看package.json文件的scripts中命令的定义，然后使用npm run '命令名’来执行
   例如: npm run serve ,npm run build ,npm run serve:prod

{
  "name": "trechkpcadminview",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve:prod": "vue-cli-service serve --mode production",
    "lint": "vue-cli-service lint"
  },
  ...

5. 项目的模式以及环境变量

   模式

   模式是 Vue CLI 项目中一个重要的概念

   • - 默认情况下，一个 Vue CLI 项目有三个模式

   • development 模式用于 vue-cli-service serve

     development

   • test 模式用于 vue-cli-service test:unit

     test 模式会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源

   • production 模式用于 vue-cli-service build

     production 模式会创建一个优化过后用于在生产环境中的webpack配置

   • 你可以通过传递 --mode选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量

   vue-cli-service build --mode development
   // 当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入
   

   <