新人入职必看之Vue的环境搭建 | 配置下载
新到一家公司，做的第一件事就是搭建环境，把原有项目跑起来，为了方便大家安装环境，特总结了一下，供新入职的朋友使用，此篇为原创，使用顺手的话希望你可以点个赞！
一.安装项目
-
git
-
node.js(含npm),cnpm(淘宝镜像)，yarn
-
vue/cli
-
创建vue项目
二.具体操作
1.git
作用：Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
下载地址：(官网):https://git-scm.com/
2.nodejs & npm
a.npm是node.js下的包管理器（下载node.js就可以使用了）
b.下载地址：https://nodejs.org/en/
c.安装后查看版本信息：
1.node -v 2.npm -v
d.如果遇到环境变量问题，参考：https://blog.csdn.net/zhouyan8603/article/details/109039732
2.2 cnpm安装：
npm install cnpm -g --registry=https://registry.npmmirror.com
检查安装是否成功：
cnpm -v
安装yarn:
npm install --global yarn
检查yarn版本
yarn --version
3.安装vue/cli（vue的脚手架）
cnpm安装vue命令：
cnpm install @vue/cli -g
验证是否安装成功：
vue -V （验证@vue/cli是否安装成功）
4.在希望创建vue项目的文件夹下打开终端
vue create vue-webapp // 输入2选择创建Vue2项目 cd vue-webapp // 进入项目根目录 npm run serve // 启动项目
5.接到没有node_modules包的项目/项目丢包的时候
删掉node_modules，然后重新安装：
在根目录执行 `cnpm install` 然后`npm run serve`
6.安装Vue路由
- cnpm i vue-router@3.5.4 -S // @用于指定版本、-S表示安装成功后把这个包记录在package.json的“dependencies”中。
7.Vuex 状态管理模块
如何在脚手架环境中集成Vue路由系统？以（vue(2) + vue-router(3)）为例- 第一步：安装路由v3版本，注册路由- cnpm i vue-router@3.5.4 -S // @用于指定版本、-S表示安装成功后把这个包记录在package.json的“dependencies”中。- 新建src/router.js文件，注册路由Vue.use(VueRouter)- 第二步：创建路由实例、定义路由规则，并在main.js挂载路由系统- export default new VueRouter({mode, routes:[]})- 在main.js挂载路由 new Vue({ router })- 第三步：在合适的位置放置一个视图容器和菜单- 在App.vue的视图中放置一个 <router-view>显示url匹配成功的组件。- 在App.vue的视图中使用 <router-link>制作菜单，点击跳转url。
代码：
cnpm i vuex@3.6.2 -S
三.目录分析
# 目录分析 - README.md 记录整个项目的命令行、启动方式、业务需求与细节、特殊bug说明。。 - vue.config.js 是基于webpack(5)二次封装的配置文件，比如改端口、做代码、上线打包优化等。 - package.json 是npm包管理器的配套文件，用于记录整个项目的基本信息（版本号、项目名称、当前项目所需要的第三方依赖包。。。） - 注意：这个文件相当重要，不要随便动它。 - jsconfig.json 这是TypeScript的配置文件（最新的TS配置文件推荐使用 tsconfig.json） - babel.config.js 这是Babel编译器的配置文件（在脚手架中可以用比较新的语法，Babel用于把比较新的语法编译成浏览器能够普遍兼容的ES5语法） - .gitigore 当你 git add / git commit / git push时，要忽略哪些文件或目录。 - node_modules目录，当前项目所依赖的所有第三方包（如果你的项目没有这个目录，或者出现了丢包情况，都建议把node_modules目录删掉，执行`cnpm install`重新安装node_modules包。） - public目录，是当前项目的本地的静态资源目录（就是本地服务器） - src目录，是你的业务代码目录（源码目录） - .vue文件（单文件组件，由视图模块、Vue组件选项、样式这三个部分组成）为了支持单文件组件的高亮，大家安装vetur插件。
