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

创建项目模板 template

打开终端

安装 vue-cli

npm install -g vue-cli

创建 blog-client 项目

vue init webpack blog-client

下面会出现项目名称描述作者等可以直接回车

下面推荐运行 + 编译

? 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)

后面根据需要选择是否使用 ESLint, 单元测试(unit tests), e2e tests 等

然后是使用 npm 还是 yarn

终端会创建 vue-blog 文件夹以及相关文件

执行以下命令

cd vue-blog
npm run dev

此时，会启动一个 server，浏览器打开 http://localhost:8080 即可看到模板项目效果

最后就可以在此基础上添加自己的项目模块，完善需求

创建路由

vue-blog 文件夹及相关文件.PNG

在终端自动创建的 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 文件夹中创建一个 pages 文件夹，里面存放我们的页面，同样通过 import Page from '@/pages/template.vue' 引入到 Router 中，在 routes 数组中加入路由对象

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

然后在初始化就生成了的 component 文件夹写我们需要的组件

最后类似的创建路由情况如下

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