博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
从零开始搭建一个vue项目
阅读量:5867 次
发布时间:2019-06-19

本文共 3362 字,大约阅读时间需要 11 分钟。

准备工作

环境依赖:;vue官方脚手架: ;

具体怎么安装nodejs和vue-cli的部分就不再具体说明了,查看官方文档按步骤执行即可(安装nodejs会默认安装npm(包管理工具),vue-cli依赖npm来安装,注意这个先后关系)。

背景知识

 核心框架

 模块化打包工具,使用vue-cli初始化项目的时候,我们选择webpack作为我们的模块打包工具

关于什么是模块化?推荐阅读这两篇文章  和 。

开始动手

初始化项目,选择webpack作为打包工具,项目名是my-project,然后按照提示填写一些配置,过程中会让你选择是否使用(推荐使用);这些配置最终会写到项目的package.json中和安装相应的模块

vue init webpack my-project复制代码

接下来使用自己熟悉的编辑器打开项目,目录结构大致是这样的

build和config目录:webpack打包的相关配置文件

src目录:我们最终编写业务代码的地方

static目录:我也不知道干嘛用的

package.json

package.json是项目最基础的配置文件。可以发现里面的很多内容,例如name,author,description等就是刚才初始化项目时我们填写的值;dependencies和devDependencies是项目依赖的包,运行项目之前需要先执行npm install 来安装项目所依赖的包

npm install复制代码

然后我们来重点关注一下scripts

npm 允许在package.json文件里面,使用scripts字段定义脚本命令。其中dev和start都是启动本地开发环境的,lint是做语法校验的,build是打包最终线上代码的

{  "name": "my-project",  "version": "1.0.0",  "description": "A Vue.js project",  "author": "ideagay 
", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }, "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": {...}, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]}复制代码

为了统一团队内的代码风格,我们一般会选择一些语法校验插件来实现代码风格的统一。这里我们选择eslint作为我们的代码检查插件。首先我们来改一下(语法校验)的相关配置,打开根目录下的.eslintrc.js,在rules下面加一个结尾分号的配置,强制末尾要加分号,养成好习惯;然后把src下面所有文件里的代码缺少分号的补全,不然编译会不通过;其他风格根据习惯自己配置吧。

"semi": [  2,  "always"]复制代码

运行项目看下效果

打开命令行工具,在当前目录下执行以下命令,一切顺利的话,会自动打开在浏览器上打开localhost:8080

# 默认8080端口npm run dev# 也可以指定端口PORT=8090 npm run dev复制代码

添加业务代码

src目录是我们主要编写业务代码的地方,可参考以下目录结构配置

assets  js,css,图片等资源目录

components  公共组件目录

router  vue-router 配置目录

views  页面组件目录

main.js  程序主入口,一般在这里添加插件,如toast,loading等,可自己编写或者使用第三方,如

App.vue  根组件

main.js

import Vue from 'vue';import App from './App';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import router from './router';Vue.config.productionTip = false;Vue.use(ElementUI);/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
'});复制代码

路由

往router/index.js里添加首页的配置

import Vue from 'vue';import Router from 'vue-router';import Home from '@/views/index';Vue.use(Router);export default new Router({  routes: [    {      path: '/',      name: 'home',      component: Home    }  ]});复制代码

网络请求

网络请求可以使用axios,然后根据业务再进行一些封装

assets/js/api/ajax.js

import axios from 'axios';var qs = require('qs');var instance = axios.create({   baseURL: 'http://xxx.com/',   timeout: 20000,   headers: {      'Content-Type': 'application/x-www-form-urlencoded'   }});const ajax = (url, params) => {   return new Promise((resolve, reject) => {      instance({         url: url,         method: 'post',         data: qs.stringify(params)      }).then(res => {         console.log(res);         if (res.data.success === true) {            resolve(res.data.data);         } else {            throw res;         }      }).catch(err => {         console.error(err);         reject(err);      })   })};export default ajax;复制代码

import Ajax from '@/assets/js/api/ajax.js';Ajax(`/tui/search`, {   'key': this.keyword}).then(res => {   console.log(res);});复制代码

样式

使用重置基础样式,消除不同浏览器间的差异,在根组件App.vue中引入就好了

复制代码

现在一般业务所需的框架已经基本搭建完成。收工

代码地址 

转载于:https://juejin.im/post/5a7c18d36fb9a0633e51c458

你可能感兴趣的文章
远程协助
查看>>
Scrum实施日记 - 一切从零开始
查看>>
关于存储过程实例
查看>>
配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler” 解决办法...
查看>>
AIX 7.1 install python
查看>>
PHP盛宴——经常使用函数集锦
查看>>
重写 Ext.form.field 扩展功能
查看>>
Linux下的搜索查找命令的详解(locate)
查看>>
福利丨所有AI安全的讲座里,这可能是最实用的一场
查看>>
开发完第一版前端性能监控系统后的总结(无代码)
查看>>
Python多版本情况下四种快速进入交互式命令行的操作技巧
查看>>
MySQL查询优化
查看>>
【Redis源码分析】如何在Redis中查找大key
查看>>
northropgrumman
查看>>
关于链接文件的探讨
查看>>
android app启动过程(转)
查看>>
Linux—源码包安装
查看>>
使用IO合并技巧轻松实现千万级消息推送
查看>>
xx项目性能测试的一般过程
查看>>
JDK8中ArrayList的工作原理剖析
查看>>