一、vue介绍

一、介绍

vue式前端框架，是一套用于构建用户界面的渐进式框架

1、安装vue

安装node.js（配置环境变量）
https://nodejs.org/en/download/
更换镜像
npm config set registry https://registry.npm.taobao.org
查看镜像
npm config get registry
安装cnpm
npm install -g cnpm
配置cnpm镜像
cnpm config set registry http://registry.npm.taobao.org
安装vue脚手架
cnpm install -g @vue/cli
查看版本信息
vue --version
1
2
3
4
5
6
7
8
9
10
11
12
13
14

问题记录：

vue : 无法加载文件 D:\node-v18.14.2-win-x64\node_global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com
/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决（修改命令行安全策略）：
get-ExecutionPolicy
# 显示Restricted （禁用）
set-ExecutionPolicy RemoteSigned
get-ExecutionPolicy
#显示RemoteSigned
1
2
3
4
5
6
7
8
9

2、创建项目

（1）创建工程

# 项目名称中不可以有大写字母
vue create vue-demo

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
 Default ([Vue 3] babel, eslint)       默认3的版本
 Default ([Vue 2] babel, eslint)       默认2的版本
>  Manually select features			   手动选择
选择手动选择（使用上下切换，使用回车选择）

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection, and  to proceed)
>(*) Babel
 ( ) TypeScript	
 (*) Progressive Web App (PWA) Support
 ( ) Router	路由（导航）
 ( ) Vuex	数据管理
 ( ) CSS Pre-processors
 () Linter / Formatter	代码规范化（代码格式严格，取消勾选防止误报）
 ( ) Unit Testing
 ( ) E2E Testing
 使用空格勾选

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection, and 
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x
  选择版本

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection, and 
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with 3.x      
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
 配置存放位置

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection, and 
? Check the features needed for your project: Babel, PWA
? Choose a version of Vue.js that you want to start the project with 3.x      
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
是否将选项设置为下次预设

Vue CLI v5.0.8
✨  Creating project in E:\vsCode\vue\vue-demo.
⚙️  Installing CLI plugins. This might take a while...


added 968 packages in 3m
�🚀  Invoking generators...
�📦  Installing additional dependencies...


added 18 packages in 2m
⚓  Running completion hooks...

�📄  Generating README.md...

�🎉  Successfully created project vue-demo.
�👉  Get started with the following command

 $ cd vue-demo
 $ npm run serve
已经创建成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

进入目录
cd vue-demo
执行项目
npm run serve

 DONE  Compiled successfully in 6817ms                                                                                                          22:09:17
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.8:8080/
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 成功运行
1
2
3
4
5
6
7
8
9
10
11
12