Vue环境部署

Vue是一个渐进式的前端框架，他可以支持你使用构建工具去使用他，或者是直接在页面中引入去使用他

1. 使用src在页面中引入Vue

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

可以直接引入使用，然后在body标签下去设置一个id为app的标签来作为跟标签使用

  <body>
     <!-- 不能直接给body设置id为app,需要进一层再设置 --> 
    <div id="app">
      <div v-for="num in arr" :key="num.id">{{num}}</div>
    </div>
  </body>

<script>
  //因为直接使用标签引入的话,vue实例会暴漏出来可直接使用
  const app = new Vue({
    el: "#app",
    data() {
      return {
        arr: [1, 2, 3, 4, 5, 6, 7],
      };
    },
    created() {
      console.log("created钩子执行");
      this.arr.push("8");
    },
  });
</script>

2. 使用vue/cli脚手架工具构建Vue项目

开发工具：

  * VsCode
  * ApiPost
  * Google Chrome

前置环境：

//node.js版本 14.18.1 LTS版
//npm 版本 6.13.1

安装步骤：

注:国内使用npm可能较慢所以使用淘宝npm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

1.安装vue/cli
npm install -g @vue/cli
完成后可以通过 
vue -V （后面这个v一定要是大写）
查看版本号,如果有输出版本号即为安装成功
// 版本要为4.5.14

环境准备完成！

3.构建项目

准备一个存放项目的位置

打开cmd/PowerShell然后使用命令构建项目

vue create <name>
    

    
//会出现
 Vue CLI v4.5.14
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
//前两个是让你选择vue2还是vue3的默认配置
//第三个是自定义配置,选择前两个配置的话就会直接开始构建项目
 
 
  
//这里选择第三个
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
//这个是选择你需要什么东西,具体需要什么要看文档
//这里就之勾选了Router和Vuex



Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x
//这个是让你选择哪个版本构建
//这里选择vue2
  
  
 
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
//这里是问你路由模式是否选择history路由
//一般开发环境都使用hash路由



 Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
//这里是让你选择语法严格的标准
//选择第三个严格模式



 Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
 //这里选择第一个保存就检测语法
 
 
  Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
  //一般选择第二个,统一配置在package.json里
  
  
  ? Save this as a preset for future projects? (y/N)
  //是否保存配置用来以后直接使用
  //这个看自己
  //如果选择y就会让你自己起个名字

回车后就会开始构建，过程可能有些慢，需要耐心等待，卡住了就回车一下

如果有bug或者报错请看下一个帖子