vue項目搭建

上次用vue是3月份，如今已經忘得差很少了，留一份簡易的搭建步驟備忘。

最簡單的搭建固然是用vue-cli啦。官方提供了browserify和webpack的手腳架項目模板。我這裏用的webpack。

webpack模板有webpack-simple和webpack兩種，webpack多了一些如Eslint檢查功能，咱們用webpack-simple夠了。

1.安裝vue-cli

　　npm install  vue-cli  --save-dev

　　記住， --save-dev是開發時用的；若是有些依賴上線後還須要，就用--save

2.下載webpack-simple模板

　　vue init webpack-simple myDemoName

　　除了myDemoName是自定義的項目名稱，前面的命令是固定的。執行以後會彈出一系列詢問，按着填而後enter就行了

3.下載項目依賴

　　在cli輸入 cd myDemoName切換到項目所在目錄，而後npm install 須要的依賴。這時候項目中會多了個node_modules 目錄。

　　我install的東西有：

　　　　npm install --save-dev babel-core   babel-loader   babel-preset-es2015    babel-preset-env   babel-preset-stage-2

　　　　//babel-preset-latest 已廢棄，env代替

　　　　npm install --save babel-polyfill

　　　　npm install --save-dev babel-plugin-transform-runtime

　　　　npm install --save-dev babel-register

　　　　npm install sass-loader node-sass --save-dev

　　　　npm install css-loader style-loader --save-dev

　　　　npm i postcss-loader --dev-save

　　　　npm install --save-dev postcss-cssnext

　　　　npm i autoprefixer --dev-save（postcss-loader插件）

　　　　npm install vue-loader

　　　　npm install vue-router  

4.執行與發佈

　　npm run dev    --運行項目

　　npm run build  --發佈（打包並自動生成dist文件）

　　dev和run這兩個命令是幫你寫好在package.json中的script中的命令

　　前者是：cross-env NODE_ENV=development webpack-dev-server

　　後者是：cross-env NODE_ENV=production webpack --progress

　　到了這一步npm run 的時候，可能會報錯說：

　　　　'NODE_ENV'

　　　　不是內部或外部命令，也不是可運行的程序或批處理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv "D:\\nodejs\\node.exe"

　　　　或者

　　　'webpack-dev-server'

　　　　不是內部或外部命令，也不是可運行的程序或批處理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv "D:\\nodejs\\node.exe"

　　解決方案：

　　　　1.安裝across-env: npm install cross-env --save-dev
　　　　2.在package.json的script命令裏的build和run兩行，NODE_ENV=xxxxxxx前面添加cross-env就能夠了。

　　　　後面若是報錯說cannot find module XXX，那就npm 安裝那個缺失的模塊。

 

-------------------------------------------分割線--------------------------------------------------------

固然，實際的項目中僅僅是上面的步驟是不夠的。

咱們在項目中總會須要用到單文件組件、路由、項目比較大的時候還會用到狀態管理。

單文件組件：

　　.vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每一個 .vue 文件包含三種類型的頂級語言塊 <template>, <script> 和 <style>，還容許添加可選的自定義塊

　　vue-loader 會解析文件，提取每一個語言塊，若有必要會經過其它 loader 處理，最後將他們組裝成一個 CommonJS 模塊，module.exports 出一個 Vue.js 組件對象。

　　npm install vue-loader

--針對預處理：

　　　　個人css用的sass

　　　　npm install sass-loader node-sass --save-dev

　　　　<style lang="sass"> /* write sass here */

　　　　 </style>

　　sass-loader 默認解析 SCSS 語法。若是你想要使用 SASS 語法，你須要配置 vue-loader 的選項：

　　{
　　　　test: /\.vue$/,
　　　　loader: 'vue-loader',
　　　　options: {
　　　　　　loaders: {scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
　　　　　　sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
　　　　　　}
　　　　}
}

路由：

　　　如今咱們已經搭建好開發環境，也經過.vue文件來解耦各個組件。vue做爲一個數據驅動視圖層的框架，想在客戶端實現視圖的切換，就須要用到它推薦的vue-router。

　　安裝

　　　　1.直接下載：https://unpkg.com/vue-router/dist/vue-router.js 在vue.j後面引入

　　　　2.npm 安裝：npm install vue-router  

　　　　import Vue from 'vue'

　　　　import VueRouter from 'vue-router'

　　　　Vue.use(VueRouter)    // 若是使用全局的 script 標籤，則無須如此（手動安裝）

　　使用

　　　　引入vue-router後，須要作的是：

　　　　一.將組件(components)映射到路由(routes)

　　　　　　// 1. 定義（路由）組件。

　　　　　　// 能夠從其餘文件 import 進來

　　　　　　　　const Foo = { template: '<div>foo</div>' }

　　　　　　　　const Bar = { template: '<div>bar</div>' }

　　　　　　// 2. 定義路由

　　　　　　// 每一個路由應該映射一個組件。 其中"component" 能夠是

　　　　　　// 經過 Vue.extend() 建立的組件構造器，

　　　 　　   // 或者，只是一個組件配置對象。

　　　　　　// 咱們晚點再討論嵌套路由。

　　　　　　　　const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ]

　　　　　　// 3. 建立 router 實例，而後傳 `routes` 配置

　　　　　　// 你還能夠傳別的配置參數, 不過先這麼簡單着吧。

　　　　　　　　const router = new VueRouter({ routes // （縮寫）至關於 routes: routes })

　　　　　　// 4. 建立和掛載根實例。 // 記得要經過 router 配置參數注入路由，

　　　　　　// 從而讓整個應用都有路由功能

　　　　　　　　const app = new Vue({ router }).$mount('#app')

　　　　　　// 如今，應用已經啓動了！

　　　　二.告訴 vue-router 在哪裏渲染它們。

　　　　 <script src="https://unpkg.com/vue/dist/vue.js"></script>

　　　　 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

　　　　 <div id="app">

　　　　　　 <h1>Hello App!</h1>

　　　　　　 <p>

　　　　　　 <!-- 使用 router-link 組件來導航. -->

　　　　　　 <!-- 經過傳入 `to` 屬性指定連接. -->

　　　　　　 <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->

　　　　　　 <router-link to="/foo">Go to Foo</router-link>

　　　　　　 <router-link to="/bar">Go to Bar</router-link>

　　　　　　 </p>

　　　　　　 <!-- 路由出口 -->

　　　　　　 <!-- 路由匹配到的組件將渲染在這裏 -->

　　　　　　 <router-view></router-view>

　　　　</div>

　　　　以上路由例程html和js引自https://router.vuejs.org/zh-cn/essentials/getting-started.html

　　若是但願路由中的某個路徑（組件）異步加載，能夠將組件的定義換成異步函數：

　　　　const setting = resolve => require.ensure([], () => resolve(require('./components/setting.vue')), 'setting');

　　再將setting放進路由中（就是後面的路由設置不變，僅僅是組件定義換成異步函數）。

　　再高級的操做看文檔例子就行了。

　　今天到此爲止。（爲何我在編輯的時候字體是黑色的，保存好看到的倒是不一樣顏色？？）

---------------------------------------分割線--------------------------------------------------------------------------------

附錄：

　　*關於單文件組件中使用postcss和autoprefixer，一開始我也不肯定，由於vue-loader有內置postcss了，可是具體設置跟通常webpack不太同樣，網上不少都是沒有的帖子。

　　後來結合了一位sf的網友給出的解決方案和文檔中的選項參考，正確的配置應該以下：

　　webpack2須要如下操做：
　　　　須要安裝postcss-loader。

　　　　var autoprefixer = require('autoprefixer');

　　　　rules: [{
　　　　　　test: /\.vue$/,
　　　　　loader: 'vue-loader',
　　　　　　options: {

　　　　　　　　loaders: {
　　　　　　　　　　'scss': 'vue-style-loader!css-loader!sass-loader',
　　　　　　　　　　'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
　　　　　　　　　　'js': 'babel-loader'
　　　　　　　　　　}

　　　　　　　　postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })]
　　　　　　}
　　　　}

　　不過文檔中有提到，在 >=11.0.0 版本中，推薦使用 PostCSS 配置文件代替：https://github.com/postcss/postcss-loader#usage

　　*關於babel-polyfill

　　npm安裝以後的使用：

　　1.entry point文件頭引入：

　　　　//ES6語法

　　　　import "babel-polyfill";

　　　　 //或者使用require以下：

　　　　require("babel-polyfill");

　　2.在webpack.config.js中：

　　　　module.exports = {
　　　　　　entry: ["babel-polyfill", "./app/js"]
　　　　};

　　*關於babel

　　1.安裝以後，在package.json同級目錄下建立.babelrc文件。vue的webpack模板已經幫咱們生成了。

　　　然而window是不能直接生成的.xxx文件的，曲線生成方法是：

　　　　　cli:type NUL > .babelrc

　　　或者新建一個.txt文件，重命名爲 .babelrc. 便可。

 　　2.在.babelrc中是以json格式配置babel的，設置以下：

　　　　{
　　　　　　"presets": [
　　　　　　　　["env", { "modules": false }],
　　　　　　　　"stage-2"
　　　　　　],

　　　　　　"plugins":["transform-runtime"]

　　　　}

　　*關於Eslint

　　　　1.安裝

　　　　npm install -g eslint
　　　　eslint --init
　　　　eslint yourfile.js

　　　　在第二步init以後，根目錄會生成一個.eslintrc.js文件，裏面寫了檢測規則。

　　　　檢測規則能夠寫在webpack中也能夠寫在.eslintrc裏，下面是SF網友"蘋果小蘿蔔"在《webpack2集成eslint》中給出的eslint及相關依賴：

　　eslint —— 基礎包
　　eslint-loader —— webpack loader
　　babel-eslint —— 校驗babel
　　eslint-plugin-html —— 提取並檢驗你的 .vue 文件中的 JavaScript
　　eslint-friendly-formatter —— 生成美化的報告格式

　　# javascript-style-standard 依賴的包
　　eslint-config-standard
　　eslint-plugin-import
　　eslint-plugin-node
　　eslint-plugin-promise
　　eslint-plugin-standard

　　

　　2.關於配置

　　https://segmentfault.com/a/1190000008575829?utm_source=itdadao&utm_medium=referral

　　https://segmentfault.com/a/1190000010463914