使用Vue做前端开发的环境准备和使用

摘要：这里我将讲解如何来搭建vue的@vue/cli脚手架，以及相应的环境配置。

1. Vue的官网

官网地址: Vue.js - 渐进式 JavaScript 框架 | Vue.js (作者: 尤雨溪)

2. @vue/cli脚手架的安装

1）全局安装命令

yarn global add @vue/cli
# OR
npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl+c暂停安装，重新进行安装

2）查看vue脚手架版本（如果出现了版本号就代表安装成功了，否则失败）

vue -V

3. 使用vue脚手架创建vue项目

1）创建vue项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

2）选择vue模板（Vue2 / Vue3，根据你的项目进行选择即可）

3）进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo

npm run serve
# 或
yarn serve

4. vue3项目启动后自动打开默认浏览器（vue.config.js)

在 vue.config.js 中加上 devServer 这一段：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
      open: true,         //自动打开默认浏览器
      host: 'localhost',  //域名
      port: 8000          //端口号设置
    },
    lintOnSave: false	//关闭eslint检查
})

5. @vue/cli 欢迎界面清理

1）src/App.vue默认有很多内容, 可以全部删除留下框（如下内容）

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>
	 欢迎使用vue
  </div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App',
  components: {

  },
  data(){
	  return {
// 存放变量，如下（数组，字符串，数字，对象）
		 bookList:[], 
		 bname:'',
		 up:0,
         obj:{},
	  }
  },
// 声明方法
  methods: {
	  queryBook() {
		
	  }
  }
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
	
</style>

2）assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

结束篇：好运，开启你愉快的vue航游吧！