vue2和vue3创建项目

1.vue2创建项目-cli

cli文档 https://cli.vuejs.org/zh/

1.1打开cmd

win + r 输入cmd
输入node -v       如果数显版本号就是一串数字就证明已经安装node环境
如果提示node不是内部或者外部命令，要先安装node.js http://nodejs.cn/download/

1.2、全局安装

npm/cnpm  install -g @vue/cli

安装指定版本（3.x.x）
npm/cnpm install -g @vue/cli@4.5.15

如果npm太慢的话，可以切换到淘宝镜像源 https://developer.aliyun.com/mirror/NPM?from=tnpm

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

1.3、创建项目

切换到项目总目录
vue create project-v2(项目名)  

项目路径：
node_modules - 需要的依赖
public
​    index.html - 挂载页面
​    favicon.ico - 项目图标
 src
​    assets - 静态资源
​    components - 组件
​    views - 页面
​    App.vue - 根组件
​    main.js - 入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上。


注意：
vue实例挂载后，会对节点原内容进行覆盖。所以，即便index.html和app.vue中都定义了<div id="app"></app>, 最终网页也不会出现两个id为app的节点。

入口文件的确定相关参考下面文章

Vue | vue cli入口文件解析（main.js,app.vue,index.html webpack）_vue的入口文件是什么-CSDN博客

1.4、运行项目

编辑器打开项目在终端执行
npm run serve

1.5 根目录比较简单,新建一个vue.config.js文件,进行配置

//vue.config.js
module.exports = {
    devServe:{
        open:true
    },
    //跨域代理
     proxy: {
         '/api': {
             target: 'http://1.116.64.64:5004/api2/',
             changeOrigin: true,
             pathRewrite: {
                 '^/api': ''
             }
         }

     }
}

1.6拓展：创建项目报错Failed to check for updates

在我使用npm创建项目时，选择了自定义配置，但是提示“*Failed to check for updates*”，项目过了十几二十几分创建不起

通过一番搜索查找之后，发现出现这个提示是因为淘宝源证书过期的问题，而npm默认对淘宝源证书是严格检查的，过期他不访问就报错了“Failed to check for updates”检查更新失败，把源换成官方的或者将证书检查关了就能解决问题。不过可能到后面的时候这个证书就没问题了，大家还是遇到了的话就换换源看看，能不能解决问题。

1.6.1、换回官方源

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

在c:/User/xxx/.vuerc下面有一个.vuerc配置文件。将useTaobaoRegistry设置为false就可以禁用淘宝镜像。这个文件本身是vue/cli生成的（猜测。。。）。

"useTaobaoRegistry": false,
这个设置不关的话还是会用淘宝镜像

换回淘宝源：

npm config set registry https://registry.npm.taobao.org/  
//已于2024年1月22日到期
切换新源
npm config set registry https://registry.npmmirror.com

用淘宝源时要记得打开：  "useTaobaoRegistry": true,

查看自己用的什么源

npm config get registry

查看npm的整体配置（里面包括了安装在哪啊，缓存文件夹在哪，现在用的什么源，也没有用代理，代理地址是什么）

/*查看配置列表，内容比较精简一般用这个*/
npm config list

/*查看npm所有的默认配置，内容很多*/
npm config ls -l

1.6.2、关闭证书检查—新的淘宝源已经有了，这个方法就不推荐用了

//清除缓存
npm cache clean --force  
//关闭严格模式
npm config set strict-ssl false

npm install

3.vue3 创建项目

vue3底层是用vite构建的

vue-cli底层是用webpack构建的

create-vue是vue3的脚手架

前提：安装16以上版本的node

3.1安装命令

进入要创建的根目录文件（比如创建在D盘vue项目文件夹里）

cd <your-project-name> 项目放置文件
npm init vue@latest   /  npm create vite@latest    /   npm create vue@latest    

命令区别：

1、创建一个新的vue项目，有两种方式，
第一种是通过npm create vue@latest命令的形式，官方文档对该命令的描述为：
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，
创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

另一种方式是通过 npm create vite@latest命令的形式，先安装vite脚手架，
再选择安装vue的形式。两者创建的项目，基本是一致的，且其中的vite和vue版本都不是最新的。

2、npm init 和npm create

之前在用npm时，一直都是npm init来初始化一个项目并生成package.json文件。
但是，今天在看vite的官方文档时，vite上说创建一个vite项目的命令是  
npm create vite@latest

之前一直没有用过npm create这个命令，难道这个npm create是vite专属的一个命令吗？
然后就去看vite的教程视频，都没有提这个create命令 ，我丢，甚是纳闷！
然后去NPM的官方文档中去查找npm create这个命令，竟然也找不到。
然后在自己的npm中找到了答案：
init命令有两个别名create、innit(init就是innit的缩写)

所以说，npm init与npm create是等价的。

3.2创建项目

3.2.1vite创建

没有安装的插件后续可以在安装

3.2.2 vue-cli脚手架创建

vue  create my-project-vue3

3.3运行项目

cd vue-vite  //进入项目目录
npm install  //安装依赖 node-modules文件夹
npm run dev  //启动项目