vue2项目建立

一、尚硅谷教程（我用这个创建了第1个和第3个vue项目）

这个项目的脚手架版本应该是大于2（第3个项目用的@vue/cli 5.0.8）

使用vue create创建方法见b站尚硅谷教程，简单说就说就是：

• 为了防止下载缓慢，我们需要配置npm源为淘宝镜像
• 全局安装脚手架@vue/cli ，在命令行用npm install -g @vue/cli命令，安装后重新打开命令行，则能用命令vue
• 切换到要创建项目的目录，然后使用命令创建项目vue create xxxx

二、vue-CLI2（我用这个创建了第2个vue项目）

因为我这个vue项目最后没完全实现所以不推荐使用这个方法，用的vue脚手架版本好像是2，感觉项目很繁琐。（脚手架版本是2.9.6）

参考：https://blog.youkuaiyun.com/weixin_55992854/article/details/121157319

1.安装npm

参考：nodejs的安装和全局配置(超详细哦)

（安装nodejs -> 有node环境 -> 能用npm了）
1-1.这个是去官网下载node.js，然后就有node和npm了

1-2.先创建文件夹node_global和node_cache
然后

npm config set prefix "D:\software\nvm\nodejs\node_global"

npm config set cache "D:\software\nvm\nodejs\node_cache"

注意：这里"D:\software\nvm\nodejs"是你下载nodejs的路径！

1-3.配置环境
https://blog.youkuaiyun.com/weixin_55992854/article/details/121140754

将【用户变量】下的【Path】由【C:\User\用户名\AppData\Roaming\npm】修改为【D:\software\nvm\nodejs\node_global】
在【系统变量】下新建【NODE_PATH】，输入【D:\software\nvm\nodejs\node_global\node_modules】

注意：这里"D:\software\nvm\nodejs"还是你下载nodejs的路径！

这样npm install -g就会安装在D:\software\nvm\nodejs\node_global\node_modules中

2.npm改为淘宝镜像

npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

3.失败的经历，正确流程直接跳到4看就好了

3-1.全局安装脚手架vue-cli
这时候我还没配第一步的路径嘛，先安装脚手架

npm install vue-cli -g

我的安装在了
D:\software\nvm\nodejs\node_modules\vue-cli路径中

检查vue-cli是否成功

开始项目

vue init webpack  "项目名称"

结果报错

使用npm install -g @vue/cli-init后还是不能新建项目，这时打算改路径。

4.成功的经历

4-1.按第一步的方法改了路径，结果是使用npm install -g下载的东西都在D:\software\nvm\nodejs\node_global\node_modules中
4-2.先下载第一个脚手架（依然报错）

npm install vue-cli -g

在文件夹中出现了vue-cli文件夹，依然会报相同的错误
4-3.然后下载第二个脚手架

npm install -g @vue/cli-init

在文件夹中出现了@vue文件夹
4-4.新建项目成功

vue init webpack front

前端建立成功，看代码好像是vue2

问题：

1.npm install vue-cli -g和npm install -g @vue/cli-init有什么区别

应该是:
安装完Vue cli3 之后，还想用vue-cli2.x 版本。
Vue CLI 3 和旧版使用了相同的vue命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的vue init功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init

安装完后 就还可以使用 vue init 命令

2.vue create 和vue init webpack的区别

https://blog.youkuaiyun.com/qq_22182989/article/details/103611934

• vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，但也可以在模板中选择创建vue2项目
• vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。只能创建vue2项目。
• vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看官方文档，用cli3的方法进行配置)

总结：用两种方式都可以创建vue2项目，只需要在进一步选择时选vue2就行， 但两种方式创建的vue2项目结构不同。vue create能创建vue2/3，vue init只能创建vue2。
（记录：我的第一个项目用vue create创建，其路径在C:\Users\86135\Desktop\vue-test\test-vue-admin； 我的第二个项目用vue init webpack "项目名称"创建，其路径在C:\Users\86135\Desktop\vue-test\front）