我的新宠Vue a系列 项目初构

2024年2月10日 108次阅读 来源: 曹伟

开始学习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: {}
};

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

【食粮】

    原文作者：曹伟
    原文地址: https://segmentfault.com/a/1190000011267049
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞