我的新宠Vue a系列 项目初构
開始學(xué)習(xí)vue,每天晚上學(xué)習(xí)，學(xué)習(xí)周期2周左右，過程中會搜集整理互聯(lián)網(wǎng)資源，并且結(jié)合自己實踐，出新，形成一套自己風(fēng)格的學(xué)習(xí)資料，這就是我的新寵Vue。會將曾經(jīng)閱讀過的相關(guān)文獻在【食糧】中說明，本【食糧】也相當(dāng)于友鏈，若相關(guān)作者覺得【食糧】涉及侵權(quán)，請及時聯(lián)系我，我會第一時間刪除。
我的項目地址vue-abc
a 項目構(gòu)建
原來我是使用webstorm進行項目開發(fā)，現(xiàn)在轉(zhuǎn)用vscode，比較輕量級，插件也很豐富。
node環(huán)境推薦8.0.0以上版本，使用yarn替代npm
1、項目初始化
2、安裝vue相關(guān)
yarn add vue3、安裝webpack相關(guān)
yarn add webpack webpack-dev-server4、安裝babel相關(guān)
yarn add babel-core babel-loader babel-preset-env5、安裝相關(guān)loader
yarn add vue-loader vue-template-compiler6、安裝loader相關(guān)
yarn add css-loader file-loader7、學(xué)習(xí)是個循序漸進的過程，我的個人喜歡會創(chuàng)建a、b、c...等系列目錄，后一個目錄是對前一個目錄知識的提升，所以在進行完上述操作后，創(chuàng)建a文件夾，a文件夾中創(chuàng)建對應(yīng)目錄以及相關(guān)文件如下
└─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'),/* 靜態(tài)目錄，可以直接從這里取文件 */publicPath: '/dist/',/* 文件名 */filename: 'build.js'},module: {rules: [/* 用來解析vue后綴的文件 */{test: /\.vue$/,use: 'vue-loader'},/* 用babel來解析js文件并把es6的語法轉(zhuǎn)換成瀏覽器認識的語法 */{test: /\.js$/,use: 'babel-loader',/* 排除模塊安裝目錄的文件 */exclude: /node_modules/}]} }通過webpack命令進行打包。
在a目錄下
在項目開發(fā)中，代碼規(guī)范非常重要，我們使用eslint進行約束。
首先安裝eslint,由于eslint是在開發(fā)的時候使用，所以注意安裝到dev下
新建或者使用 eslint --init 新增.eslintrcp配置文件
module.exports = {extends: ['vue'],plugins: ['vue'],rules: {} };簡單配置，重啟即可生效。
【食糧】
- 用webpack2.0構(gòu)建vue2.0超詳細精簡版
- eslint官網(wǎng)
- 國外vue-js-cheatsheet小書
- 簡書-從VUE-CLI來聊聊ESLint
總結(jié)
以上是生活随笔為你收集整理的我的新宠Vue a系列 项目初构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GO模仿python –m Simple
- 下一篇： 深入浅出 JavaScript 内存管理