Vue脚手架

旧城等待， 2021-09-07 06:13 451阅读 0赞

### Vue脚手架 ###

*  一、安装脚手架
 *  二、创建Vue项目
 *   *  1.交互式命令行创建
     *   *  1.创建项目
         *  2.选择配置
     *  2.图形化界面创建
     *  3.基于2.x的旧模板，创建旧版vue项目
 *  三、脚手架结构分析
 *   *  1.node\_modules
     *  2.public
     *  3.src
     *  4.babel.config.js
     *  5.eslintrc.js
     *  6.package.json
     *  7.postcss.config.js
     *  8.文件详细配置地址
 *  四、脚手架自定义配置
 *   *  1.通过packahe.json配置
     *  2.通过单独的文件来配置

快速生成vue项目架构，

# 一、安装脚手架 #

npm install -g @vue/cli

\-g表示全局安装脚手架  
推荐安装3.x的版本，可以使用2.x版本的  
输入  
这个命令是安装最新的vue-cli

vue -V

可以查看是否安装成功

# 二、创建Vue项目 #

## 1.交互式命令行创建 ##

（推荐使用）

### 1.创建项目 ###

vue create 项目名称

### 2.选择配置 ###

创建后，可以键盘上下箭头选择配置，回车确认

default(babel,eslint)  //默认创建
    Manually select features //手动选择创建（推荐）

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
     (*) Babel
     ( ) TypeScript
     ( ) Progressive Web App (PWA) Support
     (*) Router
     ( ) Vuex
     ( ) CSS Pre-processors
     (*) Linter / Formatter
     ( ) Unit Testing
     ( ) E2E Testing
     //空格选择要安装的插件
     //Babel和Linter / Formatter一定要安装
     //Linter / Formatter是保证代码风格的
     //Babel是转换文件的
     //一般安装上面的三个

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
    //问是否安装历史模式路由，我们是安装hash模式的路由选n

? Pick a linter / formatter config: (Use arrow keys)
      ESLint with error prevention only
      ESLint + Airbnb config
      >ESLint + Standard config
      ESLint + Prettier
      //选择ESLint 语法版本，选ESLint + Standard config标准版本的

>(*) Lint on save
     ( ) Lint and fix on commit
     //什么时候触发语法规则检测
     //第一个是保存的时候。选这个
     //第二个

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    > In dedicated config files
      In package.json
    
    
     //第一个是单独的文件，选择这个
    //第二个是都放在package.json里面
    //配置文件放在哪里

? Save this as a preset for future projects? (y/N)n
    //是否把上面的选择作为一个模板
    //n是不保留，我不保留,每次创建的时候重新配置
    //y是保留

之后，就开始创建项目了  
npm run serve  
就能启动项目了

## 2.图形化界面创建 ##

vue ui

输入后会打开一个网页  
通过ui界面来创建项目  
默认选2.x，3.x还在测试，测试完能用  
选择和上面的配置一样，babel一定要装

## 3.基于2.x的旧模板，创建旧版vue项目 ##

2.X版本需要先安装脚手架和上面的

npm install -g @vue/cli-init

创建项目

vue init webpack 项目名称

? Project name (2.x)
    //项目名称（）里是默认的，可以重新写，或者直接回车
    
    ? Project description (A Vue.js project)
    //项目描述
    
    ? Author
    //作者，不写的都可以直接回车
    
    > Runtime + Compiler: recommended for most users
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
    nder functions are required elsewhere
    //安装哪种vue第一个是体积较大的，完整版vue,
    //第二个是阉割板的vue,选第二个
    
    ? Install vue-router? (Y/n)
    //是否安装路由，y
    
     Use ESLint to lint your code? (Y/n)
     //是否安装eslint,y
     
     > Standard (https://github.com/standard/standard)
      Airbnb (https://github.com/airbnb/javascript)
      none (configure it yourself)
      //安装哪种版本的
      //选Standard
      
      ? Set up unit tests (Y/n)
      //是否安装单元测试，n
      
      ? Setup e2e tests with Nightwatch? (Y/n)
      //是否安装e2e测试，n
      
      ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
    > Yes, use NPM
      Yes, use Yarn
      No, I will handle that myself
      //选择哪种方式来安装包
      //选第一个或者第三个自己设置

此时就创建好 了  
npm install (or if using yarn: yarn)  
npm run lint – --fix (or for yarn: yarn run lint --fix)  
npm run dev来运行项目

# 三、脚手架结构分析 #

## 1.node\_modules ##

依赖包目录

## 2.public ##

静态资源目录  
首页，图标之类

## 3.src ##

源代码目录  
assets  
静态资源  
componets  
组件  
vies  
视图组件

App.vue  
根组件

man.js  
入口文件

## 4.babel.config.js ##

Babel配置文件

## 5.eslintrc.js ##

语法文件

## 6.package.json ##

包管理文件

## 7.postcss.config.js ##

## 8.文件详细配置地址 ##

# 四、脚手架自定义配置 #

## 1.通过packahe.json配置 ##

必须是符号规范的json语法

//vue打包的配置,新增一个节点
    "vue" :{ 
       "deServer" :{ 
         "port " :"8888",
         //指定浏览器的端口
         "open":"true"
         //open表示打包完成后自动打开浏览器
    }
    
    }

但是这种在package.json里面配置，不推荐，会污染package.json,  
package.json是用来管理包的，所以需要重新创建一份vue.config.js文件，来配置，这样方便我们 的维护，这两种方式不能同时存在，只能二选一

## 2.通过单独的文件来配置 ##

1.在项目根目录下创建一份vue.config.js文件  
2.配置文件

module.export = { 
       "deServer" :{ 
         "port " :"8888",
         //指定浏览器的端口
         "open":"true"
         //open表示打包完成后自动打开浏览器
    }}