我的新宠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: {}
};

简单配置,重启即可生效。

【食粮】

相关推荐