【Vue】cli安装，创建脚手架项目，vue项目目录介绍，路由配置

Vue

一、安装

node.js去官网下载.msi64位，傻瓜式安装（专家建议不要装C盘）
node.js官方下载地址：https://nodejs.org/en/download/

安装好node.js之后：

1. 安装cnpm

npm  install  cnpm -g --registry=https://registry.npm.taobao.org

装好npm时可能出现Error_ Cannot find module 'node_util'，这是因为npm 版本与 cnpm 的版本不匹配导致的

卸载cnpm

npm uninstall cnpm

查看npm版本

npm -v

根据 npm 的版本指定版本安装 cnpm

npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org

查看cnpm是否安装成功

cnpm -v

查询当前镜像地址

cnpm  get registry

修改当前镜像地址

cnpm config set registry http://registry.npm.taobao.org

2. vue-cli简介与安装

简介：
https://cli.vuejs.org/zh/guide/
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 工程化项目。
我们使用4以上版本：

cnpm install -g @vue/cli@4.1.1

测试是否安装成功：
vue -V 或者 vue --version

二、创建Vue项目

命令行输入：vue create qy156_vue02

vue create  qy156_vue02

第一步：选择手动

第二步：选择下面三个，空格选中，回车进行下一步

第三步：是否使用路由器的历史记录模式？（生产中的索引回退需要正确的服务器设置），这里选择 “n”

第四步：选择Inpackage.json

将配置写进json中

第五步：是否存为项目的预设？这里选择 “n”

等待一会

成功新建项目：

vue提供了vue ui 命令以图形化界面创建和管理项目：

vue ui 

打开新建的项目，目录结构如下：

npm run serve运行项目

npm run serve

启动成功：

浏览器中访问上图中路径：

三、Vue项目目录介绍

node_modules 目录

这个文件夹里面全部都是node的一些基础的依赖包，当我们拓展的安装一些别的插件时 也会装在这个文件夹里。

src 目录

这个文件夹 是整个项目的主文件夹 ， 我们的代码大部分都在这里完成。

assets 目录

里面主要放置一些资源文件。比如js 、css 之类的文件。

components 目录

可以说是vue 的 灵魂了 ， 组件文件全部都可以放到这里面。

组件 ！一个vue项目就是由一个个的组件拼装起来的。

router 目录

这个文件夹里的是整个vue项目的路由，vue 是单页面应用的代表，这里面就是设置一个一个组件的地址的文件。

app.vue 文件

这个文件是整个项目的入口文件，相当于包裹整个页面的最外层的div。

main.js 文件

这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义。

static 目录

这个文件夹里是一些静态资源文件。

package.json 文件

npm包配置文件，定义项目的npm脚本、依赖包等信息(以json的格式)

dist 目录

这个dist 文件夹 是在执行了 npm run build 打包指令之后才会出现的， 整个项目写好之后，打包出来的所有文件都会在这里，只需要访问文件夹里的index文件可以进入应用了。

四、路由的简单使用

通过（二、创建vue项目）cli创建好vue项目后

1. 在views目录下创建自己的页面Goods.vue

Goods.vue

<template>
    <div>
        HTML代码写这里
    </div>
</template>

<script>
    export default {
        name: ""
    }
</script>

<style scoped>

</style>

2. 在路由表中添加路由

添加路由：

{
    path: '/goods',
    name: 'Goods',
    component: () => import('../views/Goods.vue')
  }

如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/goods',
    name: 'Goods',
    component: () => import('../views/Goods.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

3. 将路由添加到main.js中

路由router默认已经添加，不需要进行操作

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. 在App.vue中使用路由

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/goods">Goods</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<router-view></router-view>是显示区域

浏览器显示结果：

---

说明：

vue文件同我们之前的HTML文件有些许不同

vue文件的格式：

<template>

</template>

<script>
    export default {
        name: ""
    }
</script>

<style scoped>

</style>

<template>标签中写HTML代码

<script>标签中写之前的js代码

格式也有所不同

<script>
	export default {
	    props: {//注册属性 父传子 数据传递
	    },
	    data() {
	        return {};//定义数据
	    },
	    created(){//created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
	    },
	    methods: {//方法事件处理
	    },
	    components: {//组件注册
	    },
	};
</script>

<style>标签中写之前的css样式

<style>
    .cla{
        color:red;
    }
</style>