运行项目

****在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

项目启动后，在浏览器中输入项目启动后的地址：

在浏览器中会出现vue的logo：

至此，vue的三种安装方式已介绍完毕。

项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。

一、搭建vue的开发环境（大纲）

必须安装node.js
搭建vue的开发环境，安装vue的脚手架工具官方命令行工具

npm install - -global vue-cli

3.创建项目必须cd到对应的一个项目里面

vue init webpack vue-demo01

cd vue-demo01

cnpm install / npm install / npm install --force 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install / npm install --force

npm run dev/npm run start

4.另一种创建项目的方式中小型项目（推荐） ***

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install

npm run dev

拿到别人的项目不能正常运行后看有没有node_modules这个文件（项目所有的依赖），若没有cd到项目中安装项目的依赖：cnpm install/npm install/npm install --force

二、升级：vue-cli3.0

2.1 使用vue-cli3.0

Vue CLI的包名称由vue-cli改成了@vue/cli
如果你已经全局安装了旧版本的vue-cli(3.0以下)，你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。
Node.js8.9+
安装vue-cli3.0 npm install -g @vue/cli 或者 yarn global add @vue/cli
版本是否是3.x vue --version/vue -V

2.2 通过vue-cli创建项目

创建项目命令

vue create 项目名; 项目名不建议存在大写，中间用-隔开

这时候需要注意创建项目需要预先安装的插件：

默认的会有Babel + ESLint；但是不建议默认，选择下面：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end）测试

等待项目初始化完成。。。。。。

1.cd 到项目里

2.npm run serve 运行项目

2.3. 或者使用图形化界面创建项目：

vue ui

registerServiceWorker.js：这个就是service workers的配置文件,可以对sw的各个生命周期进修改。（这个一般用的少）

自定义配置文件：vue.config.js(固定)

创建好项目后会发现找不到webpack.config.js配置文件，这是vue-cli3不想让我们随意看到配置文件隐藏起来了，可以通过在根目录下创建一个vue.config.js(名字固定)来添加我们的配置(在运行时会自动添加到webpack.config.js文件上)

vue.config.js配置项

三、vue-cli3中拉取vue-cli2

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

创建一个项目 | Vue CLI

runtime+compiler和runtime-only的区别：在main.js文件中

  /**
   *等价于
  render: function(h) {
    return h(App);
  }
    等价于
  render: function(createElement) {
    return createElement('h2');
  }
  */

    1.如果在开发中使用的是template，就需要选runtime-compiler
2.如果在开发中使用的是.vue文件夹，就需要选runtime-only(比上面那种模式轻大约 6KB，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数; .vue 文件中的template也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template)
3.runtime-compiler的vue程序运行过程：
template---------------->ast------------->render---------------->vdom------------------>UI
(模板)    解析   (抽象语法树) 编译 (render函数) 形成 (虚拟DOM) 转成   (真实DOM)
4.runtime-only的vue程序运行过程：
render------------------->vdom-------------->UI
(render函数) 形成 (虚拟DOM) 转成   (真实DOM)
5.runtime-only的性能更高、代码量更少

四、vue3创建项目

4.1 使用 vue-cli 创建

文档: cli.vuejs.org/zh/guide/cr…

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version / vue -V
## 创建项目
vue create my-project

然后的步骤

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 直接回车
Use Babel alongside TypeScript - 直接回车
Pick a linter / formatter config - 直接回车
Use history mode for router? - 直接回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车

4.2 使用 vite 创建

文档: v3.cn.vuejs.org/guide/insta…
vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，
它做到了***本地快速开发启动***, 在生产环境下基于 Rollup 打包。
- 快速的冷启动，不需要等待打包操作；
- 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
- 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

Vue2 中的 html 模板中必须要有一对根标签，Vue3 组件的 html 模板中可以没有根标签

vscode 中 Vue3中没有根标签报错(插件检测导致)设置：

文件==>首选项==>设置

看了那么多的vue.js的安装方式总结一下。如有不多请多多指教！希望给您带来帮助！

vue.js 三种方式安装（二）