准备工作
环境依赖: Node.js;vue 官方脚手架: vue-cli;
具体怎么安装 nodejs 和 vue-cli 的部分就不再具体说明了, 查看官方文档按步骤执行即可 (安装 nodejs 会默认安装 npm(包管理工具),vue-cli 依赖 npm 来安装, 注意这个先后关系)
背景知识
vue.js 核心框架
webpack 模块化打包工具, 使用 vue-cli 初始化项目的时候, 我们选择 webpack 作为我们的模块打包工具
开始动手
初始化项目, 选择 webpack 作为打包工具, 项目名是 my-project, 然后按照提示填写一些配置, 过程中会让你选择是否使用 vue-router(推荐使用); 这些配置最终会写到项目的 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 <xxxx@163.com>",
- "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 作为我们的代码检查插件首先我们来改一下 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 等, 可自己编写或者使用第三方, 如 element ui
App.vue 根组件
- mian.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: '<App/>'
- });
路由
往 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/ajax.js';
- Ajax(`/tui/search`, {
- 'key': this.keyword
- }).then(res => {
- console.log(res);
- });
样式
使用 normalize.css 重置基础样式, 消除不同浏览器间的差异, 在根组件 App.vue 中引入就好了
- <script>
- import 'normalize.css';
- export default {
- name: 'App'
- }
- </script>
现在一般业务所需的框架已经基本搭建完成收工
来源: https://juejin.im/post/5a7c18d36fb9a0633e51c458