开始学习vue,每天晚上学习,学习周期2周左右,过程中会搜集整理互联网资源,并且结合自己实践,出新,形成一套自己风格的学习资料,这就是我的新宠Vue。会将曾经阅读过的相关文献在【食粮】中说明,本【食粮】也相当于友链,若相关作者觉得【食粮】涉及侵权,请及时联系我,我会第一时间删除。
我的项目地址vue-abc
a 项目构建
原来我是使用webstorm进行项目开发,现在转用vscode,比较轻量级,插件也很丰富。
node环境推荐8.0.0以上版本,使用yarn替代npm
1、项目初始化
yarn init
2、安装vue相关
yarn add vue
3、安装webpack相关
yarn add webpack webpack-dev-server
4、安装babel相关
yarn add babel-core babel-loader babel-preset-env
5、安装相关loader
yarn add vue-loader vue-template-compiler
6、安装loader相关
yarn add css-loader file-loader
7、学习是个循序渐进的过程,我的个人喜欢会创建a、b、c…等系列目录,后一个目录是对前一个目录知识的提升,所以在进行完上述操作后,创建a文件夹,a文件夹中创建对应目录以及相关文件如下
└─a
├─src
│ ├─ app.vue #组件
│ └─ main.js #入口
├─index.html #模版文件
└─webpack.config.js #webpack配置项
app.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style scoped>
#app {
background:yellow
}
</style>
main.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: '#app',
render: h => h(App)
})
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>
<section id="app"></section>
<script src="./dist/build.js"></script>
</body>
</html>
webpack.config.js
/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');
module.exports = {
/* 输入文件 */
entry: './src/main.js',
output: {
/* 输出目录,没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录,可以直接从这里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
module: {
rules: [
/* 用来解析vue后缀的文件 */
{
test: /\.vue$/,
use: 'vue-loader'
},
/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
{
test: /\.js$/,
use: 'babel-loader',
/* 排除模块安装目录的文件 */
exclude: /node_modules/
}
]
}
}
通过webpack命令进行打包。
在a目录下
../node_modules/webpack-dev-server/bin/webpack-dev-server.js
在项目开发中,代码规范非常重要,我们使用eslint进行约束。
首先安装eslint,由于eslint是在开发的时候使用,所以注意安装到dev下
yarn add eslint eslint-config-vue eslint-plugin-vue --dev
新建或者使用 eslint –init 新增.eslintrcp配置文件
module.exports = {
extends: ['vue'],
plugins: ['vue'],
rules: {}
};
简单配置,重启即可生效。