vuecli脚手架的搭建

Posted 2022-11-18 Dr.psycho

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuecli脚手架的搭建相关的知识，希望对你有一定的参考价值。

安装nodejs 并搭建环境

1. 去nodejs的官网进行下载

2. 和jdk的环境配置一样：

打开电脑高级系统管理：
配置新建 NODEHOME 刚才拷贝的路径

并在path里面添加 %NODEHOME%\\bin

打开cmd 输入 npm -version
出现这个就证明node 环境变量配置成功了！

安装vue项目

请严格按照步骤来避免踩坑：搭建完环境变量之后
在全局中进行安装依赖：
前面4条请在桌面上直接打开cmd进行安装：

1. 首先进行nodejs的初始化

npm init -y

2. 在您的计算机当中安装vue

npm install -g vue
成功提示：

3. 在您的计算机当中安装 vue/cli

npm install -g @vue/cli
如果不通过webstrom搭建项目，还继续通过控制台创建项目，请跳过第四条，直接看第五条

4. 输入命令：

npm install -g yarn
安装yarn的依赖
安装这个依赖可以通过webstrom等开发工具进行vue项目的构建
注意：如果使用webstrom 搭建环境的话显示没有yarn等等的错误

打开这个文件，修改配置

删除model

打开控制台输入
npm install
即可

5. 开始创建你的第一个项目吧

1.选择安装的依赖功能，和vue版本

打开你想要安装到的路径下，打开cmd
输入
vue create my-vue-project
vue create 我们都知道老外的语法习惯就喜欢反着来
这个就是创建一个vue 项目名字是 my-vue-project
然后回出现这个玩意儿：

上下键进行选择
vue3:创建vue3项目
vue2:创建vue2项目
第三个：手动选择安装自己需要的依赖

如果有那个choose你的vue版本也需要勾选

标注：安装的相关功能的介绍

Babel：

TypeScript：微软搞得类似于js的玩意儿
Router:网关
Vuex： vuex版本
CSS Pre-processors: CSS 预处理器：一种具有编程逻辑的CSS语言。允许使用类似变量、函数、继承、运算符等编程方法来编写CSS文件。
linter/Formatter:约束代码风格的
unit Testing:单元测试（个人感觉还是挺有用的）
E2E Testing:与单元测试不同 , 不会将应用分解为更小的部分测试, 而是测试整个应用
个人比较喜欢使用单元测试：不过这些东西无关紧要

2.选择相关的功能并回车

必须要勾选的：

choose your vue version（如果存在此选项，没有的话就是默认帮你勾选了）
Babel
CSS Pre-processors
回车

3.选择你需要安装的vue版本

选择你想要安装的vue版本这个因人而异

4.选择你偏好的css样式

下一个选项你用过什么就选什么我选的less

5.选择你偏好的配置

第一个选项独立的包放独立的配置
第二个把配置都混在一起
果断选择第一个啊

6.给你的预设自定义名称

给你的预设起一个响亮的名字，看到这个名字就能果断知道这个配置

我这里就取了每个配置的首单词
vue2版本，babel，less，独立的配置对应独立的文件，手动的
两下回车开始跑
接下来就等就好了

7.如果窗口被冻结了的解决方案

如果窗口被冻结了
ctrl+c就可以解冻

让项目动起来

1.用命令行的方式运行项目

接下来就可以把项目跑起来了

输入这两行命令：
进入到项目的根目录
运行项目
然后根据它给出的url可以进行项目的访问
直接用鼠标拉取,然后回车进行复制

出现这个玩意儿就证明这个项目已经运行成功了，
接下来让我们愉快的开发吧！！！

2.使用webstrom打开这个项目

用webstrom或者vscode打开这个项目

看到这两行命令了吗？
我们可以通过开发工具的控制台直接输入这个命令来把项目跑起来！

我习惯用dev 就把这个改了一下
输入：
如果没有更改：
npm run serve
如果按照我的更改
npm run dev
运行成功之后回弹出来url
我们单击它就能打开！！！