使用Vue-cli构建一个项目Vue项目

​ 使用Vue-cli构建一个项目Vue项目

1、安装vue-cli

前提条件是已安装node、npm才可以执行下面的指令

npm install -g @vue/cli @vue/cli-init

安装成功后查看版本

这里很多人会遇到报错，具体解决方案我在下一篇文章详细解决。

vue -V

成功页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kGVhmCLR-1628736056827)(C:\Users\快定\OneDrive\桌面\笔记\笔记\image\image-20210812101410404.png)]

构建一个新的vue项目叫myqpp

vue init webpack myapp 

下面为询问的信息，是官方文档的解释

Vue 依然使用询问的方式，让我们对项目有一个初始化的信息

- Project name：项目名
- Project description: 项目描述
- Author: 作者
- Vue build：
    - 第一种：配合大部分的开发人员
    - 第二种：仅仅中有runtime
- Install vue-router? 是否安装vue-router
- Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
- Pick an ESLint preser:使用哪种语法规范来检查我们的代码：
    - Standard: 标准规范
    - Airbnb: 爱彼迎规范
- Set up unit test: 设置单元测试
- Setup e2e tests： 设置端对端测试
- Should we run 'npm install':要不要帮忙你下载这个项目需要的第三方包
    - 使用npm来下载
    - 使用yarn来下载

选择完成之后会出现提示页面

To get started:

  cd myapps
  npm run dev   // 使用命令启动项目

按照指令运行完之后

Your application is running here: http://localhost:8080

浏览http://localhost:8080地址，出现vue欢迎界面就安装成功了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X751oXT9-1628736056829)(C:\Users\快定\OneDrive\桌面\笔记\笔记\image\image-20210812102330681.png)]

2、项目结构介绍：官方文档的介绍

├── build				webpack打包相关配置文件目录
├── config				webpack打包相关配置文件目录
├── node_modules		 第三方包
├── src					项目源码(主战场)
│   ├── assets			 存储静态资源，例如 css、img、fonts
│   ├── components		 存储所有公共组件
│   ├── router			 路由
│   ├── App.vue			 单页面应用程序的根组件
│   └── main.js			 程序入口，负责把根组件替换到根节点
├── static				可以放一些静态资源
│   └── .gitkeep		 git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交
├── .babelrc			 配置文件，es6转es5配置文件，给 babel 编译器用的
├── .editorconfig		 给编辑器看的
├── .eslintignore	      给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js		 给eslint代码风格校验工具使用的，用来配置代码风格校验规则
├── .gitignore			 给git使用的，用来配置忽略上传的文件
├── index.html			 单页面应用程序的单页
├── package.json		 项目说明，用来保存依赖项等信息
├── package-lock.json	  锁定第三方包的版本，以及保存包的下载地址
├── .postcssrc.js		  给postcss用的，postcss类似于 less、sass 预处理器
└── README.md			 项目说明文档

3、项目部分代码解读

入口文件main.js

// 入口文件

// 以es6模块的方式引入 vue APP router 三个模块;
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  // 获取节点对象
  el: '#app',
  // 引入路由
  router,
  // 本实例的私有组件
  components: { App },
  // el 与 template 在同一个实例中出现，
  // 根据生命周期的执行顺序可知，template中的内容会替换el选中的内容
  template: '<App/>'
})

roter/index.js

路由定义页面

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// Vue 中插件引入语法 
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(Router)

// ES6模块导出语法
export default new Router({
  routes: [
    // 定义一个路由规则
    {
      path: '/', // 请求路径
      name: 'HelloWorld', // 路由名称标识
      component: HelloWorld //请求此路由时，使用的组件
    }
  ]
})

components/HelloWorld.vue

组件实现页面：

<script>
export default {
  // 模块名字
  name: 'HelloWorld',
  // 组件中 data 数据必须是一个有返回值的方法
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

3、自定义路由组件

修改 router/index.js ，添加自己的路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入自定义组件A1、A2、A3
import A1 from '@/components/A1'
import A2 from '@/components/A2'
import A3 from '@/components/A3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 添加自己的路由及组件
    {
      path: '/a1',
      name: 'A1',
      component: A1
    },
    {
      path: '/a2',
      name: 'A2',
      component: A2
    },
    {
      path: '/a3',
      name: 'A3',
      component: A3
    }
  ]
})

在 components 文件夹中添加 A1.vue、A2.vue、A3.vue 文件，写自己的组件代码：

A1.vue

<template>
  <h2>a1页面</h2>
</template>

<script>
</script>

<style>
</style>

A2.vue

<template>
  <h2>A2页面</h2>
</template>

<script>
</script>

<style>
</style>

A3.vue

<template>
  <h2>A3页面</h2>
</template>

<script>
</script>

<style>
</style>

修改app.vue实现点击切换路由：

<template>
  <div id="app">
    <router-link to="a1">a1</router-link>
    <router-link to="a2">a2</router-link>
    <router-link to='a3'>a3</router-link>
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

4、实现页面展示：

首页：

点击a1

点击a2

这样就基本实现了一个vue项目的初始化。