Vue——vue-cli 進行vue開發的腳手架工具

時間 2019-11-30

標籤 vue cli 進行開發腳手架工具简体版

原文原文鏈接

Vue全家桶：html

　　（1）Vue基礎vue

　　（2）VueRouterwebpack

　　（3）VueXgit

下面是一個路由示例：github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../inputfiles/vue.js"></script>
    <script src="../../inputfiles/vue-router.js"></script>
</head>
<body>
    <div id = 'app'>
        <!--路由入口-->
        <router-link to='/index'>首頁</router-link>
        <router-link to='/home'>家園</router-link>

        <hr>
        <!--路由出口-->
        <router-view></router-view>
    </div>

    <script>
        const routes = [
            {
                path:'/index',
                component:{
                    template:`
                <div>
                    <h1>這是INDEX頁面</h1>
                </div>
                `
                }
            },
            {
                path:'/home',
                component:{
                    template:`
                <div>
                    <h1>這是home頁面</h1>
                </div>
                `
                }
            }
        ]
        const routerObject = new VueRouter({
            routes:routes
        })
        var vm = new Vue({
            el:'#app',
            data:{},
            router:routerObject
        })
    </script>
</body>
</html>

1. Vue全家桶
　　Vue + VueRouter + VueX
2. VueRouter https://router.vuejs.org/zh/
　　基本使用
　　1. 必須導入vue-router.js文件
　　2. 要有VueRouter()實例
　　3. 要把VueRouter實例掛載到Vue實例中

4. 路由的入口
　　<router-link to='/index'>index頁面</router-link>
5. 路由的出口
　　<router-view></router-view>
2. 路由的參數
　　1. path: '/user/:name' --> 匹配路由
　　$route.params.name --> 取值

2. /user/alex?age=9000 --> url中攜帶參數
　　$route.query.age --> 取出url的參數

3. 子路由web

children:[
{
path: '',
component: {
template: `...`
　　}
　　}
]

<router-link to='info' append></router-link>

路由的第二種定義方式：path 也能夠寫成：path = '/index/:name?age=10' name能夠用來匹配視圖中的<router-link to = '/index/zsq'>趙世奇</router-link>,同時也能夠帶參數vue-router

使用方法：template:`<div>user{{$router.params.name}}</div>`vue-cli

參數使用方法：<p>{{$router.query.age}}</p> #取到age的值npm

定義子路由緩存

注意不要忘記加上append這個參數

3. vue-cli 進行vue開發的腳手架工具

1. 安裝vue-cli 工具
npm install vue-cli -g --> 全局安裝

vue init webpack 項目名 // 初始化一個vue項目

詳細步驟：

# 全局安裝 vue-cli

$ npm install --global vue-cli

# 建立一個基於 webpack 模板的新項目

$ vue init webpack my-project

$ vue init webpack test //輸入命令

? Project name (test) test

? Project name test

? Project description (A Vue.js project) 測試項目

? Project description 測試項目

? Author lxx1024

? Vue build standalone

? Install vue-router? (Y/n) Y //安裝路由

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n //Eslint驗證,很嚴謹,因此選擇n

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n) Y

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? (Y/n) Y

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "test" .

To get started:

cd test

npm install

npm run dev

Documentation can be found at https: //vuejs-templates.github.io/webpack

# 安裝依賴，走你

$ cd my-project

npm run dev 常見錯誤：

若是運行時，出現一下錯誤：

'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
或批處理文件。

解決方法：

（1）npm cache clean --force # 強制清除緩存

（2）npm install --registry=https://registry.npm.taobao.org 安裝淘寶鏡像

（3）npm install webpack-dev-server -g 全局安裝webpack開發服務包

（4）npm run dev # 運行程序

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。