Vue CLI介绍和安装

2021年2月11日 0条评论 813次阅读 0人点赞

[toc]

Vue CLI 介绍

CLI是什么意思?
- CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
- Vue CLI是一个官方发布 vue.js 项目脚手架
- 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.
Vue CLI使用前提
- Node8.9 以上或者更高版本
- Webpack

Vue CLI安装

-g global: 全局安装

// 安装CLI3, 指定版本, 否则会安装到4.5.11版本
npm install -g @vue/cli@3.2.1

vue --version
3.2.1

// 拉取CLI2使用的模板,可以让CLI3支持CLI2
npm install -g @vue/cli-init@3.2.0

使用CLI初始化项目

Vue CLI2初始化项目: vue init webpack my-project
Vue CLI3初始化项目: vue create my-project

CLI2和CLI3区别

vue-cli 3 与 2 版本有很大区别
- vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
- vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
- vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
- 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

CLI 2初始化项目

> npm config set registry https://registry.npm.taobao.org/
> vue init webpack vuecli2firstproject

// 项目名称
? Project name vuecli2firstproject
// 项目描述
? Project description 使用Vue Cli2初始化第一个项目
// 作者信息(从git全局配置中读取)
? Author baiyongjie <15600970600@163.com>
// build方式: vue推荐第一种,但往往使用的是第二种
? Vue build (Use arrow keys)
> 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 - render functions are required elsewhere
// 是否安装vue-router, 还没有学习, 后面在安装
? Install vue-router? No
// 是否开启ESLint: 语法检测, 有两个标准或者自定义
// 可以在config/index.js文件中将useEslint修改为false,进行关闭
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)
// 是否开启单元测试
? Set up unit tests No
// 是否开启e2e(端对端测试)
? Setup e2e tests with Nightwatch? No
// 选择包安装方式, npm或者Yarn
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vuecli2firstproject".


# Installing project dependencies ...
# ========================

Runtime-Compiler和Runtime-only:的区别

Runtime-Compiler:
- 有template挂载操作
- template -> ast(抽象语法树 ) -> render -> vdom -> UI
Runtime-only:
- 无template挂载操作, 通过箭头函数直接渲染, 性能更好, 代码量更小
- render -> vdom -> UI

  render: function (createElement) {
    // 1.普通用法: createElement('标签', {标签的属性}, ['标签中显示的内容'])
    // return createElement('h2',
    //   {class: 'box'},
    //   ['Hello World', createElement('button', ['按钮'])])

    // 2.传入组件对象:
    return createElement(App)
  }

《Vue CLI介绍和安装》

生成的目录结构

目录结构参考: https://www.cnblogs.com/—godzilla—/p/11444411.html

《Vue CLI介绍和安装》

启动项目

C:\Users\Administrator\WebstormProjects\learn_vue\代码文件\vuecli2firstproject>npm run dev

> vuecli2firstproject@1.0.0 dev C:\Users\Administrator\WebstormProjects\learn_vue\代码文件\vuecli2firstproject
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% 12% 13% 13% building modules 27/29 modules 2 active ...\代码文件\vuecli2firstproject\src\App.vue{ parser: "babylon" } is deprecated; 
 we now treat it as { parser: "babel" }. 13% 14% 95% emitting

 DONE  Compiled successfully in 7767ms                                                                                   下午7:56:58

 I  Your application is running here: http://localhost:8080

《Vue CLI介绍和安装》

CLI 3初始化项目

C:\Users\Administrator\WebstormProjects\learn_vue\代码文件>vue create vuecli3firstproject

Vue CLI v3.2.1
┌────────────────────────────┐
│  Update available: 4.5.11  │
└────────────────────────────┘
// 选择初始化方式
? Please pick a preset: (Use arrow keys)
// 自动初始化项目,使用默认配置
> default (babel, eslint)
// 手动配置初始化
  Manually select features

// 选择手动后继续, 上下调整菜单, 空格调整是否安装
? Check the features needed for your project:
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

// 配置文件怎么处理
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
// 存放在单独的配置文件中
> In dedicated config files
// 存放在package.json中
  In package.json

// 是否保存到快速初始化选择列表, 相对于保存一个模板, 下次初始化中就可以选择
? Save this as a preset for future projects? (y/N)
? Save this as a preset for future projects? Yes
// 保存的名字
? Save preset as: vueclie3test

// 删除保存的模板
在user/adminsiritor/.vuerc文件中删除presets中对应的对象

生成的目录结构

《Vue CLI介绍和安装》

main.js

import Vue from 'vue'
import App from './App.vue'

// 发布时, 可以改为true, 会有一些提示信息
Vue.config.productionTip = false

// 新建一个vue实例
new Vue({
  // runtime-only运行
  // 通过render直接渲染, h其实就是createElement函数
  render: h => h(App),
  // 相当于el: '#app'
}).$mount('#app')

CLI3 修改配置

vue ui

vue ui

《Vue CLI介绍和安装》

通过配置文件修改

文件路径:

《Vue CLI介绍和安装》

通过vue.config.js

在项目目录下新建 vue.config.js

/* eslint-disable */
const webpack = require('webpack')

module.exports = {
  // lintOnSave: true,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
      })
    ]
  },

  productionSourceMap: false,
  outputDir: 'dist',
  assetsDir: 'static',
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'src/index.html',
      // favicon: 'src/assets/favicon.ico',
      // 在 dist/index.html 的输出
      // filename: 'src/index.html',
      // 当使用 title 选项时，
    },

  },
  devServer: {
    proxy: 'http://127.0.0.1:8000',
    port: 9003,
    overlay:{
      warning:false,
    },

  },
};