在前开发中，前端开发人员方便快速构建和管理项目，一般会使用一些项目构建工具来辅助开发，而我们接下来要学习单文组件则必须依赖项目构建工具才能完成这块的学习，目前来说，vue开发中一般使用的前端开发工具无非:vue-cli和vite这2款最多人使用

Vue自动化工具（Vue-cli)

vue2推荐使用vue-cli

vue3推荐使用vite

一般情况下vue2.0的单文件组件使用，我们允许都会在vue-CLI中进行开发,

它可以帮我们把单文件组件编译成普通的js代码。所以我们需要在电脑先安装搭建vue-CLI工具

官网：https://cli.vuejs.org/zh/

安装node.js和认识node.js

关于node.js

Node.js发布于2009年5月，由谷歌工程师Ryan Dahl(瑞安·达尔）开发的JavaScripti运行环境，一个让JavaScript代码运行在服务端的开发平台，它让javascript变成了服务端语言，所以nodejs开发者编写的代码本质上就是javascript代码。
后端语言和前端语言的区别：

  • 工运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上。
  • 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

我们一般安装LTS(长线支持版本 Long-Time Support):

node.js的版本有两大分支：

奇数版本：每年10月份发布，版本号为奇数，例如：11.0.0，叫当前版本(Current Version),维护期是3个月。
偶数版本：次年04月份发布，版本号为偶数，例如：12.0.0，叫长线支持版本(Long-Time Support Version),维护期是3年。

其实是奇数版本还是偶数版本也不一定是对于的current version还是LST

不过可以去官网查看这些版本的信息，或者通过nvm的命令

1
nvm list available

nvm和nodejs

Vue CLI 由nodejs编写，所以我们需要Node.js8.9或更高版本（推荐8.11.0+）。你可以使用nvm或nvm-windows在同一台电脑中管理多个Node版本。

nvm工具的下载和安装

安装教程参考：nvm for windows 下载、安装及使用 - 掘金 (juejin.cn)

nvm工具常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
nvm ls ：列出所有已安装的 node 版本

nvm ls-remote ：列出所有远程服务器的版本（官方node version list）

nvm list ：列出所有已安装的 node 版本

nvm list available ：显示所有可下载的版本 [nvm for windos 中无效，但是输出相当于nmv的命令]

nvm install stable ：安装最新版 node

nvm install [node版本号] ：安装指定版本 node

nvm uninstall [node版本号] ：删除已安装的指定版本

nvm use [node版本号] ：切换到指定版本 node

nvm current ：当前 node 版本

nvm alias [别名] [node版本号] ：给不同的版本号添加别名

nvm unalias [别名] ：删除已定义的别名

nvm alias default [node版本号] ：设置默认版本

如果需要特殊 npm版本下载

1
2
3
npm install -g npm@<version>
## 例如
npm install -g npm@8.5.3

如果安装较慢可以改成淘宝镜像，在安装目录的setting文件内

npm包管理器

在安装node.js完成后，在node,js中会同时帮我们安装一个包管理器npm。我们可以借助npm命令来安装node,js的包。这个工具相当于python的pip包管理器。

1
2
3
4
5
6
7
npm install -g 包名							##安装模块-g表示全局安装，如果没有-g,则表示在当前项目安装
npm list									##查看当前目录下已安装的node包
npm view 包名engines							##查看包所依赖的Node的版本
npm outdated								##检查包是否已经过时，命令会列出所有已过时的包
npm	update包名								##更新node包
npm	uninstall/remove 包名						##卸载node包,推荐使用remove在vite中，要不然清不掉依赖源文件配置信息
npm	命令-h									##查看指定命令的帮助文档

下载和安装后面对应的参数

1
2
3
4
5
-S, –save：dependencies

-D, –save-dev：devDependencies

-O, –save-optional：optionalDependencies

其他的包管理器

yarn(Facebook、Google、Exponent 和 Tilde 联合推出) cnpm(淘宝做的)…

Yarn vs npm：你需要知道的一切 - 知乎 (zhihu.com)

为什么不推荐使用 cnpm？ - 简书 (jianshu.com)

注意：npm虽然是nodejs’官方提供的包管理工具，但事实上并不好用，所以有第三方开发者提供了更好用的yarn包管理器。
我们可以通过npm来安装yarn包管理器。

1
2
3
4
5
6
7
8
9
10
11
npm install yarn
npm install --global yarn
yarn --version		##查看版本
##基本命令
yarn global add 包名 ##全局安装模块
yarn remove			##卸载、移除或模块
yarn				##根据当前目录下的package.json文件的配置自动下载安装包列表
yarn install 		##同上
yarn dev			##根据当前目录下的package.json文件的配置启动一个http服务器运行前端项目
yarn init			##根据当前目录下生成package.json配置文件，用于自动构建前端项目
yarn publish		##将包发布到包管理器

中文文档 | Yarn 中文文档 (yarnpkg.cn)

npm 安装 yarn - 简书 (jianshu.com)

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
npm init === yarn init

npm install === yarn 或者 yarn install

npm install taco --save === yarn add taco

npm uninstall taco --save === yarn remove taco

npm install taco --save-dev === yarn add taco --dev

npm update --save === yarn upgrade

npm install taco@latest --save === yarn add taco

npm install taco --global === yarn global add taco

npm init --yes/-y === yarn init --yes/-y

npm link === yarn link

npm outdated === yarn outdated

npm publish === yarn publish

npm run === yarn run

npm cache clean === yarn cache clean

npm login === yarn login

npm test === yarn test
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
初始化项目:
yarn init // 同npm init，执行输入信息后，会生成package.json文件

yarn的配置项：
yarn config list // 显示所有配置项
yarn config get <key> //显示某配置项
yarn config delete <key> //删除某配置项
yarn config set <key> <value> [-g|--global] //设置配置项

安装包：
yarn install //安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install --flat //安装一个包的单一版本
yarn install --force //强制重新下载所有包
yarn install --production //只安装dependencies里的包
yarn install --no-lockfile //不读取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock

添加包（会更新package.json和yarn.lock）：
yarn add [package] // 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
yarn add [package]@[version] // 安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）

//不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：
yarn add --dev/-D // 加到 devDependencies
yarn add --peer/-P // 加到 peerDependencies
yarn add --optional/-O // 加到 optionalDependencies

//默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0

发布包
yarn publish

移除一个包
yarn remove <packageName>：移除一个包，会自动更新package.json和yarn.lock

更新一个依赖
yarn upgrade 用于更新包到基于规范范围的最新版本

运行脚本
yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本

显示某个包的信息
yarn info <packageName> 可以用来查看某个模块的最新版本信息

缓存
yarn cache
yarn cache list ## 列出已缓存的每个包 yarn cache dir ## 返回 全局缓存位置 yarn cache clean ## 清除缓存

安装yarn

解决yarn install总是失败_yarn安装不成功_heeyaaa的博客-CSDN博客

以为没有安装成根据上面文章提供的方式重新安装一遍

image-20230812214841088
image-20230812214841088

这什么玩意装到一半弹出个github登陆界面？？？我也没有下什么东西

yarn的安装和使用，并配置用户环境变量_yarn环境变量_麦兜:)的博客-CSDN博客

这篇文章有毒。

可我检验又是早就装好了

结果：就是一开始的安装yarn要选择全局安装，或者添加变量吧

安装Vue-cli

1
2
npm install -g @vue/cli
yarn global add @vue/cli

不是说yarn没有warning吗？还有安装个vueCli这么慢，我还开了vpn

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
C:\Users\53078>yarn -v
1.22.19

C:\Users\53078>npm get registry
https://registry.npmjs.org/

C:\Users\53078>yarn config get registry
warning package.json: No license field
https://registry.yarnpkg.com

C:\Users\53078>yarn config set registry http://registry.npm.taobao.org/
yarn config v1.22.19
warning package.json: No license field
success Set "registry" to "http://registry.npm.taobao.org/".
Done in 0.05s.

C:\Users\53078>yarn config get registry
warning package.json: No license field
http://registry.npm.taobao.org/

C:\Users\53078>yarn global add @vue/cli
yarn global v1.22.19
warning package.json: No license field
[1/4] Resolving packages...
warning @vue/cli > shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
warning @vue/cli > @vue/cli-ui > shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
warning @vue/cli > @vue/cli-ui > apollo-server-express@3.12.0: The `apollo-server-express` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/##switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core@3.12.0: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-types > apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-types > apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-datasource > apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-server-plugin-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-server-plugin-base > apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve##deprecated
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url##deprecated
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix##deprecated
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url##deprecated
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@vue/cli@5.0.8" with binaries:
      - vue
Done in 22.70s.

C:\Users\53078>

麻了切换成国内的淘宝镜像源22.70s就安装好了

image-20230813094146616
image-20230813094146616

麻了，还需要手动添加环境变量，重启一下cmd就好了

image-20230813094243425
image-20230813094243425

参考文章:yarn的安装和使用，并配置用户环境变量_yarn环境变量_麦兜:)的博客-CSDN博客

NPM设置淘宝镜像

1.查询当前配置的镜像

1
npm get registry

https://registry.npmjs.org/

2.设置成淘宝镜像

1
npm config set registry http://registry.npm.taobao.org/

3.换成原来的

1
npm config set registry https://registry.npmjs.org/

常用淘宝镜像

1
2
3
4
5
6
7
npm install phantomjs --phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
npm install chromedriver --chromedriver_cdnurl=http://npm.taobao.org/mirrors/chromedriver
npm install operadriver --operadriver_cdnurl=http://npm.taobao.org/mirrors/operadriver
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
1
2
3
4
5
6
7
yarn config set disturl https://npm.taobao.org/dist -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g
yarn config set chromedriver_cdnurl https://cdn.npm.taobao.org/dist/chromedriver -g
yarn config set operadriver_cdnurl https://cdn.npm.taobao.org/dist/operadriver -g
yarn config set fse_binary_host_mirror https://npm.taobao.org/mirrors/fsevents -g

参考文章：

yarn默认的包管理服务器在国外，所以第一次使用yarn安装模块时会出现提示是否切换到淘宝镜像站，我们填写y即可

使用Vue-CLI初始化创建前端项目

使用vue-cli自动化工具可以快速搭建单页应用项目目录。

该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检擦以及可用于生成环境的构建配置项目：

1
2
3
4
5
6
7
8
9
// 生成一个基于webpack模块的新项目
vue create 项目目录
列如：
cd ~/Desktop				cd ./Desktop //windows操作
vue create myproject

// 启动开发服务器ctrl+c停止服务
cd myproject	##项目名需要全部小写
npm run serve	##运行这个命令就可以启动node提供的测试http服务器

此处我们选择中间vue3(通过上下键切换)

假如安装了一半突然因为网络异常，而安装失败，可以重试几次

1
2
cd myvueproject
yarn serve

如此便可以通过提供的url访问本地前端vue服务器

1
ctrl +c //停止服务器

自定义安装

一、选择安装配置，空格表示选择/取消。选择完成以后回车

二、选择vue版本

三、选择路由插件的路由模式

历史状态管理模式，就是路由没有##号？

四、选择EsLint的配置项

五、EsLint格式化的时机，把2个都勾选上就行

保存时，和运行提交时

六、EsLint和Babel是否存放在一起，还是单独

选择第二个

七、是否保存上面的安装配置为以后安装复用

下次再安装就会出现这种配置方案

要全部小写

启动服务器后

和之前的页面有些不一样，因为多配置了一个路由依赖

如果在第三部选择了n那么当前访问的路由会变的多一个##号

1
2
http://127.0.0.1:8080/##/
http://127.0.0.1:8080/##/about

生成项目目录

在windows上使用更丰富的tree命令

Window平台下tree 命令使用 - 牧白 - 博客园 (cnblogs.com)

而如果你强制使用可能会提示你

1
参数太多 - 1

winodws cmd不支持丰富的tree命令,但可以使用git bash进行tree命令操作，生成文件目录

下载window for tree工具

Tree for Windows (sourceforge.net)

选择其中的Binaries.zip

解压后将其中bin目录下的tree.exe复制到C:\\Program Files\Git\usr\bin目录下

tree 命令格式和参数：

TREE [drive:][path] [/F] [/A]

  • /F 显示每个文件夹中文件的名称。（带扩展名）
  • /A 使用 ASCII 字符，而不使用扩展字符。(如果要显示中文，例如 tree /f /A >tree.txt)

tree命令行参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
-a 显示所有文件和目录。							##默认
-A 使用ASNI绘图字符显示树状图而非以ASCII字符组合。
-C 在文件和目录清单加上色彩，便于区分各种类型。
-d 显示目录名称而非内容。
-D 列出文件或目录的更改时间。
-f 在每个文件或目录之前，显示完整的相对路径名称。
-F 在执行文件，目录，Socket，符号连接，管道名称名称，各自加上"*","/","=","@","|“号。
-g 列出文件或目录的所属群组名称，没有对应的名称时，则显示群组识别码。
-i 不以阶梯状列出文件或目录名称。
-I 不显示符合范本样式的文件或目录名称。
-l 如遇到性质为符号连接的目录，直接列出该连接所指向的原始目录。
-L 限制tree命令的分支数量,显示几级目录			##常用
-n 不在文件和目录清单加上色彩。
-N 直接列出文件和目录名称，包括控制字符。
-p 列出权限标示。
-P 只显示符合范本样式的文件或目录名称。
-q 用”?"号取代控制字符，列出文件和目录名称。
-s 列出文件或目录大小。
-t 用文件和目录的更改时间排序。
-u 列出文件或目录的拥有者名称，没有对应的名称时，则显示用户识别码。
-x 将范围局限在现行的文件系统中，若指定目录下的某些子目录，其存放于另一个文件系统上，则将该子目录予以排除在寻找范围外。
1
tree -I "node_modules">tree.txt

排除”node_modules”目录，并且将生成的目录树导入tree.txt文件

Tree for Windows (sourceforge.net)

或者你是Ubuntu,可以参考这个文章

项目目录结构

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
.##项目根目录
|-- README.md
|-- node_modules	##本地开发项目运行的依赖目录
|-- dist			##项目完成以后，如果项目上线，会编译整个项目成js代码，编译后代码保存在这里
|-- babel.config.js	##高级代码转译器
|-- jsconfig.json	##
|-- package.json	##项目运行的配置文件
|-- public			##访问入口目录
|   |               ┕-- favicon.ico
|                   ┕-- index.html		##项目唯一html页面，整个项目的内容都是被index.html加载提供给用户访问的
|-- src				##核心开发目录，所有的源代码都保存在这里
|   |-- App.vue		##项目的根组件，由App.vue进行加载所有的组件页面和子组件
|   |-- assets		##资产目录，保存项目所需的静态资源[img/视频/音频等附件]
|   |               ┕-- logo.png
|   |-- components	##子组件目录，保存一些零零碎碎的部分页面内容的组件
|   |               ┕-- HelloWorld.vue
|   |-- main.js		##全局初始化入口脚本，index.html被运行时会自动加载这个js文件
|   |-- router		##路由文件保存
|   |               ┕-- index.js		##默认情况下路由文件
|   |-- store		##全局状态管理器，保存公共数据/公共变量的.vuex
|   |               ┕-- index.js		##默认情况的全局变量保存文件
|   ┕-- views		##页面组件目录，一个vue文件就一个页面
|       |           ┕-- AboutView.vue
|                   ┕-- HomeView.vue
|-- tree.txt
|-- vue.config.js
┕-- yarn.lock

7 directories, 18 files

在webstorm启动项目

想直接在终端执行yarn脚本启动服务器和安装package.json的依赖文件报了这么一个错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
PS C:\Users\53078\Desktop\myproject2> yarn
yarn : 无法加载文件 C:\Program Files\nodejs\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies  
。
所在位置 行:1 字符: 1
+ yarn
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
PS C:\Users\53078\Desktop\myproject2> yarn serve
yarn : 无法加载文件 C:\Program Files\nodejs\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies
。
所在位置 行:1 字符: 1
+ yarn serve
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

原因在于PowerShell 执行策略是一项安全功能，用于控制 PowerShell 加载配置文件和运行脚本的条件。 此功能有助于防止恶意脚本的执行

所以如果要使用yarn等脚本命令，需要更改执行策略

1
2
3
get-ExecutionPolicy
set-ExecutionPolicy RemoteSigned
set-ExecutionPolicy Restricted

Vue项目执行流程图

index.html
main.js
App.vue路由
组件一
组件二
组件三
组件四
组件a
组件b
组件c
组件d
组件e
组件f
组件g

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main,js中会导入顶级单文件组件App.vue,
App.vue中会通过组件嵌套或者路由来引用views页面组件，views组件会根据开发的页面需要加载components.文件夹中的其他
单文件子组件。

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“vue”，比如：”Home.vue”。

快来参与讨论吧~

博客近期分类标签归档
笔记Vue学习笔记Django学习笔记MySQL学习笔记
社交友链留言板
更多关于本站GitHubGitee

本破站由 @BXZDYG 使用 Stellar 主题创建。
本博客部分素材来源于网络，如有侵权请联系1476341845@qq.com删除
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。

本"页面"访问 次 | 👀总访问 次 | 总访客 人
全部都是博主用心学编写的啊！不是ai啊 只要保留原作者姓名并在基于原作创作的新作品适用同类型的许可协议，即可基于非商业目的对原作重新编排、改编或者再创作。