vue项目-第一部分 创建项目结构及路由的使用

这两天要使用vue创建一个新的项目
然后就整理了一下vue创建项目的流程及其细节
仅供参考 还请各位大佬多多指正

1.引入vue

第一步引入vue 这里是 vue的官方文档 大家可以参考 \(^o^)/

npm install @vue/cli -g 创建脚手架（这里是脚手架 3 的版本 ---- webpack 4 ）

vue create myapp & vue ui 安装vue项目结构 两种都行 vue ui是可视化界面 操作较简便 但都差不多

npm run dev 项目运行

在这里可以分析一下项目目录的结构

src文件下是我们的主要战场 这里自然再次分析一下

2.开发流程

导入导出模块有两种方法

es6 导出模块 export default Model

es6 导入模块 import Model from './'

const Vue = require('vue')

module.exports = ajax

样式的使用 处理样式 less/scss/stylus/css 通常市面上主要使用这些 这里我们使用scss

路由创建

@vue/cli脚手架在创建项目时，选择了vue-router，所以无需再次安装，但是如果你没有选择，可以使用 npm i vue-router -S 安装，本项目中关于路由的文件在src/router.js

App.vue中删掉页面组件和注册的方法，使用代替

路由的使用
将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
创建好项目时会自动生成一个文件 router.js,如果没有的话，执行以下步骤
cnpm / npm i vue-router -S 创建src/router.js
如果是脚手架创建的，那么可以忽略，如果不是，需要自main.js处添加如下代码

通过给new Vue() 注入了路由，这样就可以在整个项目的任何位置都可以访问到路由对应的对象

告诉 Vue Router 在哪里渲染它们，App.vue 中原先头部和内容的区域代码去掉，输入如下代码

控制路由的变化 使用 router-link 组件来导航 通过传入 to 属性指定链接
< router-link > 默认会被渲染成一个 < a > 标签,可以使用 tag 属性生成目标标签

下一篇开始数据请求渲染 今天先到这里 ^_^