我的新宠Vue a系列 项目初构
开始学习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: {}
};简单配置，重启即可生效。
【食粮】
- 用webpack2.0构建vue2.0超详细精简版
- eslint官网
- 国外vue-js-cheatsheet小书
- 简书-从VUE-CLI来聊聊ESLint
相关推荐
gloria0 2020-10-26
gloria0 2020-08-09
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
安卓猴 2020-09-12
malonely 2020-07-20
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11