构建Vue项目

按照官网教程安装

//先安装脚手架
cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板
vue list //使用webpack模板创建项目
vue init webpack my-project //进去新创建的文件夹
cd my-project //打开package.json 看scripts字段
//dev 可以使用npm run dev 或者 npm start 开启开发模式
//build 可以使用npm run build 打包项目,生成最终
//还有其他的命令根据创建项目的时候的选择决定

webpack模板默认安装了vuevue-routerpostcssbabel,如果需要其它的可以自己再安装。

安装sass

cnpm i --save-dev node-sass sass-loader

安装好后就可以在.vue文件style便签设置 <style scoped lang="scss">就可以开启scss功能

安装axios

cnpm i --save axios

main.js文件中引入axios并将其指定为Vue.prototype.$http = axios

//main.js
//全局的Vue,所有组件都是这个Vue的实例
import Vue form 'vue';
import axios from 'axios'; //由于所有Vue的组件都继承于这个全局的Vue,所有的组件都能够通过$http拿到axios
//自定义全局属性要带'$'
Vue.prototype.$http = axios;

安装vuex

cnpm i --save vuex

main.js文件中引入Vuex,使用Vue.use(Vuex)且创建store,然后将store添加到全局 new Vue({store})

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App' Vue.use(Vuex) const store = new Vuex.Store({
state: {
count: 0
}
}) new Vue({
el: '#app',
component: App,
store,
template: "</App>"
})

项目结构

  • /src

    • /assets
    • /components
    • /containers
    • /modules
    • /router
    • /scss
    • App.vue
    • main.js

/assets

主要放图片字体等静态文件

/components

公用组件,所有页面都可以公用的组件,或者单例组件,像弹出窗按钮、等可以多次复用的组件

/containers

页面组件router中的路由组件,相对路由来划分这个文件夹的结构

比如路由/user/change_psw/login

  • /containers

    • User.vue
    • /user
      • ChangePsw.vue
    • Login.vue
import User from '@/containers/User';
import ChangePsw from '@/containers/user/ChangePsw';
import Login from '@/containers/Login'; const router = [
{
// 匹配 /user
path: '/user',
component: User,
children: [
{
// 匹配 /user/change_psw
path: 'change_psw',
component: ChangePsw
}
]
}, {
// 匹配 /login
path: '/login',
component: Login
}
]

/modules

Vuex的状态管理,这里按每个页面划分,当然还可以别的方法,这里只供参考

  • /modules

    • modules.js
    • index.js
    • user.js

modules.js负责将所有模块收集起来(类似reduce的合成),index.jsuser.js分别管理页面index和页面user的全局状态

//modules.js
import index from './index'
import user from './user' export default {
index,
user
}
//index.js
export default {
namespaced: true,
state: {
a: 1
}
}
//user.js
export default {
namespaced: true,
state: {
a: 2
}
}

除了这些模块的状态,还有一个全局的状态,如果全局的状态有点大,可以将其独立成一个文件。

若超大,再开文件夹,再细化。同理,页面状态也可以。

最后在mian.js装载这些模块

import modules from '@/modules/modules';
import Vuex from 'vuex';
import Vue from 'vue'; const store = new Vuex.Store({
modules,
// ...定义全局的状态
}) new Vue({
store,
// ... 其他的配置
})

/router

如果项目比较大,可以按模块来划分这个文件夹的结构。小项目,一个文件即可。

  • /router

    • buy-ticket.js
    • index.js

和别的文件一样,index.js是所有模块路由的总和,buy-ticket.js是买票模块的路由

由于vue的路由是可以嵌套的,我们完全可以拆分路由,然后再合并。

//buy-ticket.js

export default [
{
//路由配置
},
{
//路由配置
}
]
//index.js 借助数组扩展符 或者 成为嵌套路由children的值

import Vue from 'vue';
import Router from 'vue-router';
import buyTicketRouters from '@/router/buy-ticket';
import Index from '@/containers/Index';
import Ticket from '@/containers/Ticket'; Vue.use(Router); export default new Router({
routes: [
{
path: '/',
components: Index
},
...buyTicketRouters,
//采用children
{
path: '/ticket'
components: Ticket,
children: buyTicketRouters
}
]
})

具体项目,要按项目的功能来拆分,以上只供参考。

/scss

这个样式项目结构,一言难尽,可以了解我的scss相关的文章

Sass项目结构之 7-1模式

Vue构建项目的更多相关文章

  1. vue 构建项目vue-cli

    1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...

  2. vue 构建项目遇到的请求本地json问题

    在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边 ...

  3. vue 构建项目 文件引入

    1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...

  4. vue 构建项目遇到的问题

    1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思 ...

  5. 关于vue构建项目的一些指令

    第一步: brew install nodejs(MAC机子下)  Windows直接官网下载对应版本node.js 第二步: 获取nodejs模块安装目录访问权限(Windows系统忽略)sudo ...

  6. 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details

    今天构建vue项目执行npm install初始化后报错 run `npm audit fix` to fix them, or `npm audit` for details 出现这问题控制台会有一 ...

  7. vue构建项目全过程

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

  8. Webpack+Vue构建项目

    第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...

  9. vue构建项目步骤

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

随机推荐

  1. 笔记-JavaWeb学习之旅8

    Window对象-定时器方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. Windows 2008 R2 如何安装.net framework 3.5

    服务器中安装sql server2012 ,  安装过程中提示没有此 “ Framework 3.5.1 功能 ” , 是不是很尴尬 于是简单记录安装 Framework 3.5.1 功能的步骤 一. ...

  3. 常用SQL语句写法(一)

    <resultMap id="userResult" type="com.cloudwalk.shark.model.User"> <id p ...

  4. Maven - settings.xml里的offline节点的作用

    场景 某天我在本地修改了某个子项目的代码,并进行了打包:mvn clean install -DskipTests,接着我运行父项目却发现自己刚刚的改动并没有生效,或者说,我刚刚打包好的子项目变回了打 ...

  5. socketserver 入门练习

    个人理解: 个人感觉socketserver其实就是为服务端专门提供的一个用于解决多用户并发访问需求的一个模块 小试牛刀: 服务端socketserver_server.py import socke ...

  6. python错误之RuntimeError: dictionary changed size during iteration

    pythonn报错信息: C:\Users\Administrator\AppData\Local\Programs\Python\Python36-32\python.exe C:/Users/Ad ...

  7. 洛谷1537(bitset+01背包)

    总数是偶数并且其一半可得即可. bitset的移位可替代原本的数组转移. #pragma comment(linker, "/STACK:1024000000,1024000000" ...

  8. JAVA Debug调试技术

    System.out.println(e),这个方法打印出异常,并且输出在哪里出现的异常,不过它和另外一个e.printStackTrace()方法不同.后者也是打印出异常,但是它还将显示出更深的调用 ...

  9. 接口测试02 - 无法绕过的json解析

    概述: 先瞧一下什么是json.JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式. 它基于ECMAScript(w3c定制的js规范)的一个子集 ...

  10. 访问NopCommerce的Admin 运行Nop.Admin后台管理

    Step 1.下载和安装NopCommerce的源码: Step 2.打开和运行Presentation下的Nop.Web 项目: Step 3.初次运行 会弹出界面 配置管理员账号 和 数据库信息: ...