01-Vue-Vue的引入方式

（1）第一类引入方式

1.自己引入cdn

到字节跳动静态资源公共库 (bytedance.com)里面搜索vue，可以得到vue.js源码和资源链接

2.自己把vue.js文件放在项目文件夹中引入项目 然后webpack打包

main.js文件：

import Vue from "./vue.js";

new Vue({

    el:'#ni',

    data:{

        msg: "hello"

        // age: 4

    }

})

console.log(1);

public/index.html 文件：

  <div id="ni">

{{msg}}

    </div>

3.HbuilderX 创建项目 选择 vue项目普通模

（2）第二类引入方式

就是直接把vue的代码环境集成了 然后开始在vue的代码环境中写项目,最终才经过webpack打包生成第一类方式

1.自己构建vue的脚手架(面试): 用npm下载vue 引入到项目中 然后webpack打包

/*

1.新建项目  alipay

2.初始化配置文件:npm init -y

3.下载依赖:

 npm i webpack@5.74.0 webpack-cli@4.10.0 vue-loader@17.0.0 @vue/compiler-sfc@3.2.37 webpack-dev-server@4.10.0  html-webpack-plugin@5.5.0 -D

 

npm i vue -S

 

4.webpack.config.js配置:

*/

2.使用官方脚手架的方式来构建项目环境(面试)

自动化生成打包环境。项目名称用英文。

1.  cnpm install  @vue/cli -g //下载官方脚手架

2.  vue create app1  //项目名称

3. 接下来让你选择一些默认要生成的工具,不管直接回车

4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端

5. 启动:

npm run serve  //生成的打包文件在内存中不会写入磁盘用于开发阶段

或者 

npm run build //生成的打包文件在dist中 用于项目上线

3.可视化项目管理方式(面试)

1.  cnpm install  @vue/cli -g

vue -V :参看版本号

2.  vue ui

3. 打开的界面 中

4.创建项目==>填写项目名字,选择项目创建的目录 点击创建

5.等待它下载所有配置文件完毕 

6.任务中serve启动以后想当与启动了热更新服务器:默认localhost:8080(也可以点启动app直接帮我们打开localhost:8080)

7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为:  ./ 然后点保存修改 

补充：配置文件的^ 、~ 、以及不写的意义

package.json文件中：

"dependencies": {

  "axios": "^0.27.2", 

  "vue": "^3.2.37" 

//^字符号，3：下载的最新大版本，不能更改成其他（如2）版本;2：下载到最新的版本，可更改; 37：改变的小bug，可改

//~字符：代表下载vue最新版本

// 不写：表示下载当前写的版本，"vue"："3.3.37"

 },