Vue 简单的总结四(项目流程,DIY脚手架、vue-cli的使用)

项目流程

1.下载

cdn

2.引包 vue-router依赖vue

vue-router.js

3.如果是模块化机制 Vue.use(vue-router)

4.创建示例

let Home = {/*....*/}

const router = new VueRouter({

 //5.配置路由信息

    routes:[

        {

            path:'/',

            redirect:'/home'

        },

        {

            path:'/home',

            name:'Home',

            component:Home

        }

    ]

})

new Vue({

    //6.挂载router对象到vue的实例中

    router

})

5.使用路由

router-link默认被渲染成a标签 to属相会被渲染成href

<div>

    <router-link to = '/'>首页</router-link>

    <router-link :to = '/home' @click.native = ''>首页</router-link>

     路由组件的出口

     <router-view></router-view>

</div>

6.动态路由匹配

/user/1 /user/2 加载的是同一个组件

routes:[

        {

            path:'/',

            redirect:'/home'

        },

        {

            path:'/user/:xxxx',

            name:'User',

            component:User

        }

    ]

 <router-link :to = '{name:"User",params:{xxxx:"front"}}'>前端</router-link>

 <router-link :to = '{name:"User",params:{xxxx:"ios"}}'>IOS</router-link>

复用的组件监听路由的变化

watch: {

    '$route':(to,from)=>{

        to 要进入的页面的路由信息对象

        from 从哪个路由信息对象中来

    }

}

7.编程式导航

this.$router.push({

    name:"Home"

})

DIY脚手架

cmd

module.exports = xxx

require()

es6module

//module.js

var person = {

    name:'张三',

    fav:function () {

        alert(1);

    }

}

var name;

name = 23;

export {name}

export  var num2 = 34;

export function add() {

    alert(2)

}

export default person

//main.js

import * as a from './module.js'

//as 起别名

npm 相当于 pip3

node package manager

webpack模块使用

1、nodejs 安装

2、npm init --yes 默认生成一个package.json文件（管理整个项目中的包）

vue-cli的使用 ***

使用脚手架创建一个项目，只要下载了vue-cli就有了vue的命令

vue -V   // 查看vue版本

　　目前可用的模板有webpack模板和webpack-simple模板，我们主要用前者，后者简单了解

1、使用webpack-simple模板创建项目

　　// init初始化命令是版本2的命令，拉取了cli2后，即可用版本2又可用版本3的

vue init webpack-simple 04-my-project   // 自动生成名为04-my-project的项目，目录如下

04-my-project

　　|--.babelrc

　　|--.editorconfig

　　|--.gitignore

　　|--index.html

　　|--package.json

　　|--README.json

　　|--webpack.config.js

　　|--src

　　　　|--App.vue

　　　　|--main.js

　　　　|--assets

　　　　　　　|--...

// 执行下面命令，下载package.json中的包，注意一定要进入当前项目，即cd 04-my-project

npm install     // 执行后项目文件下生成node_modules目录

// 启动项目

npm run dev

// 下载vue-router

npm i vue-router -S     // -S下载到当前项目中

// vue提供scoped属性，使得style属性只对当前组件有效，不写就是全局有效

<style scoped></style>

2、使用webpack模板创建项目

　　// 创建项目

vue init webpack 05-webpack-project   // 创建项目名为05-webpack-project的项目

　　// 若使用单页面应用，则vue-router选项输yes，其他都是no，电脑有npm就选择npm下载

　　// 进入项目

cd 05-webpack-project

// 安装依赖的包

npm install

　// 启动项目

npm run dev

// 最后生成目录如下

05-webpack-project

　　|--.babelrc

　　|--.editorconfig

　　|--.gitignore

　　|--.postcssrc.js

　　|--index.html

　　|--package.json

　　|--README.md

　　|--build 文件夹

　　|--config 文件夹

　　|--node_modules 文件夹

　　|--src 文件夹

　　|--static 文件夹

注意：nodejs中有这样一个机制，即若一个文件夹下只有index.js，则直接写文件夹名字即可。

　　接下来就可以写项目了！

4、使用elementui（ElementUI依赖vue，引用了要Vue.use(ElementUI)）

// 下载到项目中

npm i element-ui -S

详细内容参见官网：http://element-cn.eleme.io/#/zh-CN

　　main.js中使用

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

5、全局css

　　全局css样式文件，可以在static下创建global文件夹，创建index.css，再在main.js中引用即可。

　　main.js中引用方式如下：

import '../static/global/index.css'

5、query查询（会在当前路径下拼接查询条件 '?userid=2'，后期将等号后边的动态起来）

<router-link :to="{name:'Course', query:{userid:2}}">免费课程</router-link>

四、补充知识点

1、下载webpack命令

npm i webpack@3.12.0 -g      // -g表示global

如果出现下面的错误，则再执行npm cache clear --force，如下图：

通过module.exports = 变量抛出2、CMD需要在nodejs的环境下

　　通过require('./time.js') 引入

　　这是CMD规范，了解即可，而vue中使用的是es6的module规范。

3、pycharm安装vue

　　1）file - > settings - >Plugins搜索vue，点击Search in repositonies，如下图：

2）点击左侧Vue.js，点击右侧绿色按钮Install，如下图：

3）安装完成后重启pycharm即可。