vue.js 項目初始化 (小白)

創(chuàng)建項目模板 template

打開終端

安裝 vue-cli

npm install -g vue-cli

創(chuàng)建 blog-client 項目

vue init webpack blog-client

下面會出現(xiàn) 項目名稱描述作者等可以直接回車

下面推薦運行 + 編譯

? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users 
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

下面使用 vue-router (會給出vue-router范例)

? install vue-router? (Y/n)

后面根據(jù)需要選擇是否使用 ESLint, 單元測試(unit tests), e2e tests 等

然后是使用 npm 還是 yarn

終端會創(chuàng)建 vue-blog 文件夾以及相關文件

執(zhí)行以下命令

cd vue-blog
npm run dev

此時，會啟動一個 server砌溺，瀏覽器打開 http://localhost:8080 即可看到模板項目效果

最后就可以在此基礎上添加自己的項目模塊影涉，完善需求

創(chuàng)建路由

vue-blog 文件夾及相關文件.PNG

在終端自動創(chuàng)建的 vue-blog 文件夾以及相關文件中找到 src 文件夾下的 router 文件夾里面的 index.js

初始化應該是這樣的

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

實際使用中，其實我們可以在 src 文件夾中創(chuàng)建一個 pages 文件夾规伐，里面存放我們的頁面蟹倾，同樣通過 import Page from '@/pages/template.vue' 引入到 Router 中，在 routes 數(shù)組中加入路由對象

其中 @/pages/template.vue 里面的 @/ 相當于就是 ./

然后在初始化就生成了的 component 文件夾寫我們需要的組件

最后類似的創(chuàng)建路由情況如下

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/Login/template.vue'
import Index from '@/pages/Index/template.vue'
import Register from '@/pages/Register/template.vue'
import User from '@/pages/User/template.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Index
    },
    {
      path: '/Login',
      component: Login
    },
    {
      path: '/Register',
      component: Register
    },
    {
      path: '/User',
      component: User
    }
  ]
})

樣式使用在此先提兩點

scoped 樣式：僅在此頁可用

<style scoped src="./path"> </style>

lang="less" ：要用到 less 的話

<style scoped lang="less" src="./path/style.less"></style>

最后編輯于：2019.10.17 23:10:49

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者