成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初探Vue之環(huán)境搭建

hiYoHoo / 862人閱讀

摘要：最近得閑，想總結(jié)總結(jié)最近在學(xué)習(xí)上的一些心得，畢竟作為新手多寫(xiě)多練好處多多，話不多說(shuō)，馬上開(kāi)始前端工程化為開(kāi)發(fā)帶來(lái)了很多便利，但實(shí)際是，環(huán)境的配置也要大費(fèi)周章一番。

最近得閑，想總結(jié)總結(jié)最近在學(xué)習(xí)Vue上的一些心得，畢竟作為新手多寫(xiě)多練好處多多，話不多說(shuō)，馬上開(kāi)始！

前端工程化為開(kāi)發(fā)帶來(lái)了很多便利，但實(shí)際是，環(huán)境的配置也要大費(fèi)周章一番。我用的是在Node環(huán)境下基于webpack來(lái)編譯打包的，在package.json中用到的包大致如下：

所下的都是當(dāng)時(shí)線上最新的版本，也是根據(jù)自己項(xiàng)目的需求來(lái)下載的。Node構(gòu)建環(huán)境搭好后就可以來(lái)寫(xiě)webpack.config.js了，（至于怎么初始化Node環(huán)境和安裝什么的，網(wǎng)上一找都有），這里要注意的是，如果你用的是Sass來(lái)寫(xiě)css的話node-sass有時(shí)候會(huì)莫名的裝不上，只需用npm install sass-loader node-sass --save-dev這樣就可以了（用npm安裝的話）
再就是webpack.config.js的配置了，如下

  `
  

      var path = require("path"); //這里引入路徑包
        var webpack = require("webpack"); //引入webpack
        var ExtractTextPlugin = require("extract-text-webpack-plugin");//這個(gè)插件是可以將scss文件獨(dú)立抽取編譯為css文件到指定的目錄下
        var ExtractCss = new ExtractTextPlugin("./[name].css");//[name]是你入口指定的名字
        module.exports = {
             plugins: [
                ExtractCss  //引入插件
            ],
            entry: {
                main: ["./src/main.js"],  //入口文件
                index: ["./src/css/login.scss"]
            },
            output: {
                path: path.resolve(__dirname,"./output"), //輸出路徑
                publicPath: "/output/",  //公共文件路徑
                filename: "[name].build.js" //輸出文件名
            },
            module: {  //下面這些是用指定模塊編譯你要的文件
                loaders: [   
                   { test: /.vue$/, loader: "vue", exclude: /node_modules/ },
                   { test: /.html$/, loader: "html-loader", exclude: /node_modules/ },
                   { 
                       test: /.js$/, 
                    loader: "babel",
                       exclude: /node_modules/
                   },
                   { test: /.css$/, loader: "style!css!autoprefiexer" },
                   { test: /.scss$/, loader: ExtractCss.extract(["css", "sass"]) },
                   { test: /.json$/,loader: "fild-loader?name=./json/[name].json" },
                   {
                    test: /.(png|jpg|jpeg|gif)$/,
                    loader: "url-loader?limit=10000&name=./images/[name].[ext]"
                  }
                ]
            },
            resolve: {
                alias: {
                   "vue$": "vue/dist/vue.js" //這個(gè)是編譯.vue文件的,路徑不用改
                },
                extensions: ["",".js",".vue",".scss"]
            },
            babel: {
                presets: ["es2015"] //用es6的語(yǔ)法的話，要額外定義
            }
        }
        
        `

因?yàn)槲抑苯訑]的是vue2.0的版本，也不知道之前和1.0有什么不同，網(wǎng)上自己找了個(gè)教程，結(jié)果被坑了好久，就是版本改動(dòng)后，很多API都不一樣了，這里以后要注意，特別是2.0版本的獨(dú)立構(gòu)建和運(yùn)行構(gòu)建，具體看這里 [1]:[http://cn.vuejs.org/v2/guide/...獨(dú)立構(gòu)建-vs-運(yùn)行時(shí)構(gòu)建]

也是因?yàn)?b>alias: { "vue$": "vue/dist/vue.js" },別名沒(méi)加導(dǎo)致了程序跑不起來(lái)。
我用的是vue組件化得方式，每個(gè)頁(yè)面都是一個(gè)組件，就是.vue的文件。具體的代碼以后再上吧，沒(méi)寫(xiě)完全。

以上是我學(xué)習(xí)中的一些小問(wèn)題，說(shuō)明不當(dāng)之處還請(qǐng)高手們多多指教！多多交流

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81397.html

相關(guān)文章

  • 利用K8S技術(shù)棧打造個(gè)人私有云（連載之：私有云客戶端打造）

    摘要：前端技術(shù)棧還是非常龐大的，為了能夠借助已經(jīng)存在的輪子來(lái)造出一輛車，所以我選擇了進(jìn)行實(shí)踐。狀態(tài)的管理的狀態(tài)管理依靠完成，用其來(lái)管理的所有組件狀態(tài)。私有云客戶端打造主頁(yè)面首先是主頁(yè)面，可以打開(kāi)任何一個(gè)云主機(jī)系統(tǒng)的頁(yè)面看，基本類似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技術(shù)棧打造個(gè)人私有...

    Jingbin_ 評(píng)論0 收藏0

  • 利用K8S技術(shù)棧打造個(gè)人私有云（連載之：私有云客戶端打造）

    摘要：前端技術(shù)棧還是非常龐大的，為了能夠借助已經(jīng)存在的輪子來(lái)造出一輛車，所以我選擇了進(jìn)行實(shí)踐。狀態(tài)的管理的狀態(tài)管理依靠完成，用其來(lái)管理的所有組件狀態(tài)。私有云客戶端打造主頁(yè)面首先是主頁(yè)面，可以打開(kāi)任何一個(gè)云主機(jī)系統(tǒng)的頁(yè)面看，基本類似。 showImg(https://segmentfault.com/img/remote/1460000013930354); 【利用K8S技術(shù)棧打造個(gè)人私有...

    shiina 評(píng)論0 收藏0

  • Docker Swarm集群初探

    摘要：既然要組集群那就涉及諸如的資源調(diào)度管理等等一系列問(wèn)題。目前涉及集群的三個(gè)主要的技術(shù)無(wú)外乎三種。從本文開(kāi)始作者將會(huì)一一實(shí)踐這幾種主要的集群技術(shù)，話不多說(shuō)，現(xiàn)在開(kāi)始。完全運(yùn)行于內(nèi)存中，體積小，啟動(dòng)快。 showImg(https://segmentfault.com/img/remote/1460000015723680); 前言 相信Docker技術(shù)大家都有所了解，單個(gè)Docker能發(fā)...

    MingjunYang 評(píng)論0 收藏0

  • Spring Boot Admin 2.0開(kāi)箱體驗(yàn)

    摘要：概述在我之前的應(yīng)用監(jiān)控實(shí)戰(zhàn)一文中，講述了如何利用版本來(lái)可視化地監(jiān)控應(yīng)用。接下來(lái)我們就來(lái)創(chuàng)建一個(gè)待監(jiān)控的示例。 showImg(https://segmentfault.com/img/remote/1460000015671446); 概述 在我之前的 《Spring Boot應(yīng)用監(jiān)控實(shí)戰(zhàn)》 一文中，講述了如何利用 Spring Boot Admin 1.5.X 版本來(lái)可視化地監(jiān)控 ...

    CastlePeaK 評(píng)論0 收藏0

  • 【前端早讀會(huì)】每天記錄前端學(xué)習(xí)的過(guò)程

    摘要：在這里使用學(xué)而思網(wǎng)校的錄像設(shè)備，記錄前端工程師每天學(xué)習(xí)的內(nèi)容商城小程序分享人王聰視頻插件開(kāi)發(fā)分享人魏媛視頻原理分享人李佳曉視頻講座優(yōu)化實(shí)戰(zhàn)分享人江芊視頻文件操作分享人張凱視頻一次性學(xué)會(huì)正則表達(dá)式分享人賀杰視頻淺談 在這里使用學(xué)而思網(wǎng)校的錄像設(shè)備，記錄前端工程師每天學(xué)習(xí)的內(nèi)容： 2019-8-22 商城小程序codereview 分享人：王聰 視頻：https://lecture.xue...

    tylin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<