Vue_CLI

环境搭建

1
2
3
4
5
6
7
8
9
10
11
1.安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
    
2.安装cnpm #淘宝源，下载速度较快
npm install -g cnpm --registry=https://registry.npm.taobao.org
    
3.安装脚手架
cnpm install -g @vue/cli

4.清空缓存处理
npm cache clean --force

项目创建

1
2
3
4
5
6
7
8
1.项目创建
vue create 项目名 #项目会创建在当前文件夹下

2.启动服务
npm run serve #需要进入项目根目录

3.打包项目
npm run build #需要进入项目根目录

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
	-- assets:资源
	-- components:组件
	-- views:视图组件
	-- App.vue:根组件
	-- main.js: 入口js
	-- router.js: 路由文件
	-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

vue项目修改端口

1
2
3
4
5
6
7
我们可以通过修改vue.config.js来实现达到修改端口的目的
#vue.config.js
module.exports={
	devServer: {
		port: 8888
	}
}

实现自定义组件跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
组件的跳转
1.在app.vue中的template中添加两个标签
<router-link to="/要跳往的路径">内容</router-link> #该标签类似于前端的a标签
<router-view></router-view> #组件的内容如果想要展示必须加
   eg:
        <router-link to="/home">Home</router-link>
2.新建组件
	如上述示例所示，我们需要在components下新建一个以vue结尾的文件
    
    template:
         <template>
            <div>
                <h1>home</h1>
                <p>{{msg}}</p>
            </div>
        </template>
     
    script:
        <script>
            export default {  #export是导出的意思，只有在这里导出了我们才能在别处引用这个组件
                data () {
                    return {
                        msg: "我是home 组件"
                    }
                }
            }
        </script>
        
3.新建一个router.js文件,将组件的路径写在这边
router.js：
    import Vue from 'vue' #导入vue
    import VueRouter from 'vue-router' #导入vue-router,没有该组件的需要安装
    
    #导入组件
    import Home from './components/home'
    import About from './components/about'

    Vue.use(VueRouter) #注册，告诉vue我们需要使用VueRouter

    export default new VueRouter({
        routes:[
            {
            path: '/home', #在url中输入路径对应的组件
            name: 'home', #对应的名称
            component:Home #路径对应的组件
        },
            {
            path: '/about',
            name: 'about',
            component:About
        }
        ]
    })

4.最后在main.js中注册一下     
main.js:
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    Vue.config.productionTip = false #这是提示

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

动态路由匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
在实际的开发环境中我们经常需要做到动态的路由匹配
例如:
    http://192.168.11.214:8888/user/1 #找到对应编号为1的用户，
那么我们需要如何去匹配这个路径让他去往对应的路径呢
eg：
router.js:
    {
        path: '/user/:username', #:username代表key,方便我们在后续的页面使用特殊的方式取出这个参数
        name: 'user', 
        component:User #上述路径对应的组件
    }
    
user.vue:
    <template>
   		<div>用户名是:{{$route.params.username}}</div> #router.params代表的就是参数对象
    </template>

捕获路径不正确的页面返回404

1
2
3
4
5
6
7
8
我们可以在路由的最后添加一个path: '*'，这代表匹配所有的路径，由于我们路由匹配时自上而下的，所以我们可以把这个匹配到所有路由的分配给404页面
eg:
router.js:
    {
    	path: '*',
     	name: 'error',
        component:Error
    }

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
有些时候我们需要在一个组件中进行一些组件的嵌套，面对这种需求vue也为我们提供了相应的语法
在路由中我们只需要在对应的组件下面添加一个children属性即可
router.js:
{
    path: '/',
    name: 'main',
    component:Main,
    children:[
        {
            path: '/home',
            name: 'home',
            component:Home
    	}
    ]
}
然后我们在父组件中添加一个<router-view></router-view>标签就可以把对应的组件渲染在该位置

使用js实现页面组件跳转

1
2
3
我们可以通过点击页面组件中的某个控件来达到跳转组件的效果，但是我们本身也可以通过js来实现页面组件的跳转
语法:
    this.$router.push('路径')