vue2.0 据说也出了很久了,博主终于操了一次实刀。
整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶),构建工具使用尤大大推出的vue-cli
项目是图片分享社交平台。
项目预览:
1 .vue-cli构建工具必知
我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识
webpack 基本知识点:
entry:入口点,webpack会从入口点设置的js文件开始对项目进行构建,过程中,所有入口点文件和路径;
output:中设置打包好的文件的输出路径还有文件名;
module:主要是loaders,loaders是webpack进行打包的解析器,css、vue、babel、scss都需要用npm安装相应的loader,webpack才能对该格式的文件进行解析和处理;
plugins:是一些webpack的打包插件,跟解析的语言无关,用来辅助构建,提供丰富的附加功能。
vue-cli 安装
1). 首先,安装 vue-cli。(确保你有 node 和 npm)
rush:js;">
npm i -g vue-cli
2).创建一个 webpack 项目并且下载依赖
rush:js;">
vue init webpack demo
cd demo
npm i
3). 运行
rush:js;">
npm run dev
//npm run xxx 是执行配置在package.json中的脚本
e.g: 它会去找到package.json的scripts对象,执行node bulid/dev-server.js
4). 构建
生成 dist 目录,将dist目录放在服务器上,使用服务器上访问index.html的url即可
若打包之后,项目的静态文件出现引用路径问题,可于项目目录 config/index.js 修改以下数据
rush:js;">
module.exports = {
build:{
assets
subdirectory: 'static',//
修改这里成你项目放置
静态文件的目录
assetsPublicPath: './',//
修改这里成你项目放置
静态文件的目录
}
}
在静态文件 index.html 文件下, 引用静态文件
vue支持scss 配置
1).安装以下模块
rush:js;">
npm install node-sass --save-dev
npm install
sass-loader --save-dev
//--save-dev 会将该依赖写入package.json,方便别人安装依赖
2).打开webpack.base.config.js在loaders里面加上
rush:js;">
{
test: /\.scss$/,loaders: ["style","css","sass"]
}
3).在需要用到scss的地方写上
2. 项目整体架构
项目整体目录如下
package.json
rush:xhtml;">
--build
--con
fig
--
dist //npm run build 之后再
生成的目录
--src
--components // 用于存放组件
--page //
页面组件,由vue-router引入
--router //路由
--store // 数据流管理
main.js //入口
文件
app.vue //主组件
--static //
静态文件目录
.babelrc
.gitig
nore //git忽略
上传文件
index.html //
静态文件入口
main.js
入口文件,主要作用是初始化vue实例并使用需要的插件
rush:js;">
import Vue from 'vue'
import router from './router/router'
import store from './store/store'
Vue.config.debug = true //开启debug模式
window.log = console.log
let data = {
router,store
}
new Vue(data).$mount('#app')
//创建一个app实例,并且挂载到选择符#app匹配的元素上 在根目录html里面
挂载到#app ,此处看一下尤大大给的生命周期图,以下的意思是,假如new vue 的时候,有显示的 el 属性
rush:js;">
let data = {
el:'#app',router,store
}
则无须手动挂载到选择符#app匹配的元素上
app.vue
app.vue是我们的主组件,所有页面都是在App.vue下进行切换的,由于app.vue在所有页面都有,我们将会在app.vue上面写一些初始化全局方法。
考虑到 组件 header,footer,loading动画基本整个项目都会使用到,app.vue代码如下
由于footer,loading在整个项目中会频繁地改变,故v-show
v-if如果条件为false,它什么也不做,加载速度较快。当条件为真时,v-if 才会真正编译渲染页面结构
v-show 渲染页面结构后,通过 "display:none" 控制元素状态
router 根据不同路由跳转目录,按需加载相应的组件
rush:js;">
const routes = [
{
path: '/',component: App,children: [
{path: '/index/:type',name: 'index',component: Index},{path: '/home',name: 'home',component: Home},{path: '/HomeUserInfo/:uid',name: 'homeUserInfo',component: HomeUserInfo},{path: '/article/:id',name: 'article',component: Article},{path: '/addmsg',name: 'addMsg',component: AddMsg},{path: '/search/:types',name: 'searchresult',component: SearchResult},{path: '/login',name: 'login',component: Login},{path: '/register',name: 'register',component: Register},{path: '/modif',name: 'Modifi',component: Modifi},{path: '/admin',name: 'Admin',component: Admin}
]
}
]
const router = new VueRouter({
routes: routes,// short for routes: routes
linkActiveClass: 'active',// router-link的选中状态的class,也有
一个默认的值
history: true
})
后续更新 项目中遇到的难点,以及vuex使用~
本文已被整理到了《》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。