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