Vue：第一个vue-cli项目

Vue：第一个vue-cli项目

什么是vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；

预先定义好的目录结构及基础代码，就好比我们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；

主要的功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

需要的环境

• Node.JS:https://nodejs.org/zh-cn/download/

  安装就无脑一直下一步就好，安装在自己的环境目录下

  

  使用.mis安装包window会自动帮我们整个打包好并配置好了系统环境变量，就算卸载也可以通过window完全卸载干净，zip需要自己配置环境变量

  1. 系统变量新建NODE_HOME, 值为Nodejs根目录
  2. 系统变量path编辑,添加%NODE_HOME%和%NODE_HOME%/node_global
  3. 在根目录添加node_global和node_cache文件夹
  4. npm config set prefix “根目录\node_global”
  5. npm config set cache “根目录\node-cache”

• Git:https://git-scm.com/downloads（暂时不需要）

  镜像:https://npm.taobao.org/mirrors/git-for-windows

  确认nodejs安装成功

• cmd管理员身份下输入node -v，查看是否能够正确打印出版本号即可

• cmd管理员身份下输入npm -v，查看是否能够正确打印出版本号即可

  这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多

  安装Node.js淘宝镜像加速器（cnpm）

  这样子的话，下载会快很多~

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

​ 安装的位置：C:\Users\Adminstrator\AppDate\Roaming\npm

​ 注意：如果是用.zip的位置会不同，上面有说明

​ 然后设置系统权限,不然可能装不了yarn或vue-cli，以下的命令行最好使用powershell，管理员身份运行，cmd可能执行不了

set-ExecutionPolicy RemoteSigned

​ 用cnpm安装yarn

cnpm install -g yarn

​ 用cnpm安装vue-cli

cnpm install -g @vue/cli

​ npm, cnpm, yarn都是打包方式

第一个vue-cli应用程序

1. 输入指令，会出现项目仪表盘

vue ui

2. 打开项目管理器

3. 点击创建并配置项目路径,写完路径记得回车

4. 配置项目名+包管理器

5. 选择手动配置

6. 选择需要安装的插件，默认一下三个就好了

7. .选择vue版本和排错策略

8. 不保存预设,除非你对刚才的配置很熟悉

9. 等待

10.成功后会进入到仪表盘

11. 下载webStorm，用webStorm打开项目

官网：https://www.jetbrains.com/webstorm/

12. 项目目录

• node_modules类似于后端的jar包依赖libraries
• App.vue被main.js渲染的主页面
• main.js是VueCli项目主入口
• package.json管理插件版本和项目基本信息

13. 点击Terminal，会发现像cmd一样可以输入指令

14. 输入以下两行指令

会出现以下画面

15. 双击任何一个地址

出现这个东西相当于就项目搭建成功了！！！

什么是WebStorm

WebStorm 是JetBrains公司旗下一款JavaScript开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

WebStorm具有智能代码补全、代码格式化、html提示、联想查询、代码调试等多种优势功能，其对业界最新技术提供支持，支持流行的版本控制系统，为前端开发人员提供了极大的方便。

测试案例

如果项目构建成功之后，那么接下来就开发我们自己的项目，在这里我就做一个小案例，方便大家理解和应用，那么我们接下来的这个案例是关于vue路由的使用，首先我们在src/components目录下构建三个组件componentA,componentB,componentC,结构如下

• A代码

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'ComponentA',
  data(){
    return{
      msg:'这是组件A',
    }
  }
}
</script>

<style scoped>
h1{
  color: red;
}
</style>

• B代码

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'ComponentB',
  data(){
    return{
      msg:'这是组件B',
    }
  }
}
</script>

<style scoped>
h1{
  color: yellow;
}
</style>

• C代码

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'ComponentC',
  data(){
    return{
      msg:'这是组件C',
    }
  }
}
</script>

<style scoped>
h1{
  color:blue;
}

</style>

三个组件构建完成之后，我们修改App.vue，在这里我们引入我们定义的三个组件，实例代码如下:

<template>
  <div id="app">
    <component-a></component-a>
    <component-b></component-b>
    <component-c></component-c>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
    "ComponentA": () => import("@/components/ComponentA"),
    "ComponentB": () => import("@/components/ComponentB"),
    "ComponentC": () => import("@/components/ComponentC")
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行效果