vue.js2.0 新手开发_vue2.0开发实践总结之入门篇

矫情吗；* 2022-12-31 11:24 151阅读 0赞

vue2.0 据说也出了很久了，博主终于操了一次实刀。

整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶)，构建工具使用尤大大推出的vue-cli

项目是图片分享社交平台。

项目预览：

![Image 1][]

1 .vue-cli构建工具必知

我选用的vue-cli 是基于webpack的版本 ，不了解webpack的可以先粗略看下下面的基本知识

webpack 基本知识点：

entry：入口点，webpack会从入口点设置的js文件开始对项目进行构建，过程中，所有入口点通过import或者require依赖的包，都会被打包到output中制定的文件和路径；

output：中设置打包好的文件的输出路径还有文件名；

module：主要是loaders，loaders是webpack进行打包的解析器，css、vue、babel、scss都需要用npm安装相应的loader，webpack才能对该格式的文件进行解析和处理；

plugins：是一些webpack的打包插件，跟解析的语言无关，用来辅助构建，提供丰富的附加功能。

vue-cli 安装

1). 首先，安装 vue-cli。(确保你有 node 和 npm)

npm i -g vue-cli

2).创建一个 webpack 项目并且下载依赖

vue init webpack demo

cd demo

npm i

3). 运行

npm run dev

//npm run xxx 是执行配置在package.json中的脚本

e.g: 它会去找到package.json的scripts对象，执行node bulid/dev-server.js

4). 构建

npm run dev   //运行结束后，在当前目录下会在生成 dist 目录，将dist目录放在服务器上，使用服务器上访问index.html的url即可

若打包之后，项目的静态文件出现引用路径问题，可于项目目录 config/index.js 修改以下数据

module.exports = \{

build:\{

assetsSubDirectory: 'static', //修改这里成你项目放置静态文件的目录

assetsPublicPath: './', //修改这里成你项目放置静态文件的目录

在静态文件 index.html 文件下， 引用静态文件

vue支持scss 配置

1).安装以下模块

npm install node-sass --save-dev

npm install sass-loader --save-dev

//--save-dev 会将该依赖写入package.json，方便别人安装依赖

2).打开webpack.base.config.js在loaders里面加上

test: /\\.scss$/,

loaders: \["style", "css", "sass"\]

3).在需要用到scss的地方写上

2. 项目整体架构

项目整体目录如下

package.json

\--build

\--config

\--dist //npm run build 之后再生成的目录

\--src

\--components // 用于存放组件

\--page //页面组件，由vue-router引入

\--router //路由

\--store // 数据流管理

main.js //入口文件

app.vue //主组件

\--static //静态文件目录

.babelrc

.gitignore //git忽略上传文件

index.html //静态文件入口

main.js

入口文件，主要作用是初始化vue实例并使用需要的插件

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 属性

![Image 1][]

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   根据不同路由跳转目录,按需加载相应的组件

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

\})

![Image 1][]

后续更新 项目中遇到的难点，以及vuex使用～

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[Image 1]:

vue.js2.0 新手开发_vue2.0开发实践总结之入门篇

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue这些修饰符节省20%的开发时间

相关 Spring Boot学习总结（20）——提升开发效率之热部署

相关大数据开发之Hive篇20-Hive的高级特性

相关 vue.js2.0 新手开发_vue2.0开发实践总结之入门篇

相关 Vue 新手学习笔记：vue-element-admin 之入门开发

相关 [044] 微信公众平台开发教程第20篇-新手解惑40则

相关关于前端开发的20篇文档与指南

相关 [044] 微信公众平台开发教程第20篇-新手解惑40则

相关 Python 开发中遇到的20个坑（总结篇）

相关【总结】项目实践2016.12.20