【笔记】局部创建vue项目并升级

前提：系统安装好node，如下

node -v
v14.19.1
npm -v
6.14.16

环境：Mac

搭建资料：https://www.bilibili.com/video/BV1AD4y1t7rb?p=4&spm_id_from=pageDriver&vd_source=6e4a298c0fc9aaa87778d006c063c38a

代码目录：

一、创建vue项目和切换cli版本

1、创建新文件夹为项目根目录

2、cd到根目录上执行命令npm init -y初始化设置项目

package name: (vue) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

3、执行命令cnpm i -D @vue/cli 局部安装脚手架 （没有cnpm则执行命令npm install -g cnpm安装cnpm）

（执行命令npx vue -V查看@vue/cli版本号）

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vue/cli": "^5.0.8"
  }
}

4、执行命令vue create vue-demo创建项目

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features 

选择 Vue2后enter开始自动下载创建，完成最后给出如下命令：

🎉  Successfully created project vue-demo.
👉  Get started with the following commands:

 $ cd vue-demo
 $ npm run serve

5、执行命令cd vue-demo、命令npm run serve启动项目

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.106:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

6、设置vue.config.js使启动后自动打开

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true
  }
})

不同版本设置自启动命令不同，查询官网地址为：https://cli.vuejs.org/zh/config/#devserver-proxy

切换vue/cli命令：

a、执行命令cnpm i -D vue-cli局部卸载当前版本；

b、执行命令npm i -D @vue/cli@4.5.15下载vue-cli的不同版本；

c、执行命令cnpm i -D @vue/cli@4.5.15局部下载vue-cli的不同版本；

d、执行命令npx vue -V查看切换的版本 。

二、实际创建

1、按照第一部分创建完名称为vue的项目

2、在main.js中引入element ui

// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

使用element ui，其特征为 el-标签名

<el-button>demo</el-button>

3、按需使用

npm i element-ui -S
npm i babel-plugin-component -D

在.babel.config.js新增以下内容

"plugins": [
	[
		"component",
		{
			"libraryName": "element-ui",
			"styleLibraryName": "theme-chalk"
		}
	]
]

在main.js中引入

// main.js
import {Button, Tag}from 'element-ui'
 
Vue.use(Button)
Vue.use(Tag)

4、或在项目目录下新建plugins文件夹，新建element.js文件

// element.js
import Vue from 'vue'
import {Button, Tag}from 'element-ui'
 
Vue.use(Button)
Vue.use(Tag)

// main.js
import '../plugins/element.js'

5、在组件中使用

<el-button>demo</el-button>
<el-tag>标签-</el-tag>

三、其他

1、使用CSS预处理器Scss