初探Vue之環境搭建

hiYoHoo 發布于2019-08-20 14:04 / 843人閱讀

摘要：最近得閑，想總結總結最近在學習上的一些心得，畢竟作為新手多寫多練好處多多，話不多說，馬上開始前端工程化為開發帶來了很多便利，但實際是，環境的配置也要大費周章一番。

最近得閑，想總結總結最近在學習Vue上的一些心得，畢竟作為新手多寫多練好處多多，話不多說，馬上開始！

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

所下的都是當時線上最新的版本，也是根據自己項目的需求來下載的。Node構建環境搭好后就可以來寫webpack.config.js了，（至于怎么初始化Node環境和安裝什么的，網上一找都有），這里要注意的是，如果你用的是Sass來寫css的話node-sass有時候會莫名的裝不上，只需用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");//這個插件是可以將scss文件獨立抽取編譯為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" //這個是編譯.vue文件的,路徑不用改
                },
                extensions: ["",".js",".vue",".scss"]
            },
            babel: {
                presets: ["es2015"] //用es6的語法的話，要額外定義
            }
        }
        
        `

因為我直接擼的是vue2.0的版本，也不知道之前和1.0有什么不同，網上自己找了個教程，結果被坑了好久，就是版本改動后，很多API都不一樣了，這里以后要注意，特別是2.0版本的獨立構建和運行構建，具體看這里 [1]:[http://cn.vuejs.org/v2/guide/...獨立構建-vs-運行時構建]

也是因為alias: { "vue$": "vue/dist/vue.js" },別名沒加導致了程序跑不起來。
我用的是vue組件化得方式，每個頁面都是一個組件，就是.vue的文件。具體的代碼以后再上吧，沒寫完全。

以上是我學習中的一些小問題，說明不當之處還請高手們多多指教！多多交流

云服務器 GPU云服務器快速搭建php運行環境之wampserver 網絡環境之vps 云服務器搭建vue項目阿里云服務器搭建vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81397.html

利用K8S技術棧打造個人私有云（連載之：私有云客戶端打造）

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

Jingbin_ 2019-06-28 16:19 評論0 收藏0
利用K8S技術棧打造個人私有云（連載之：私有云客戶端打造）

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

shiina 2019-07-01 16:41 評論0 收藏0
Docker Swarm集群初探

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

MingjunYang 2019-06-28 16:13 評論0 收藏0
Spring Boot Admin 2.0開箱體驗

摘要：概述在我之前的應用監控實戰一文中，講述了如何利用版本來可視化地監控應用。接下來我們就來創建一個待監控的示例。 showImg(https://segmentfault.com/img/remote/1460000015671446); 概述在我之前的《Spring Boot應用監控實戰》一文中，講述了如何利用 Spring Boot Admin 1.5.X 版本來可視化地監控 ...

CastlePeaK 2019-08-16 12:45 評論0 收藏0
【前端早讀會】每天記錄前端學習的過程

摘要：在這里使用學而思網校的錄像設備，記錄前端工程師每天學習的內容商城小程序分享人王聰視頻插件開發分享人魏媛視頻原理分享人李佳曉視頻講座優化實戰分享人江芊視頻文件操作分享人張凱視頻一次性學會正則表達式分享人賀杰視頻淺談在這里使用學而思網校的錄像設備，記錄前端工程師每天學習的內容： 2019-8-22 商城小程序codereview 分享人：王聰視頻：https://lecture.xue...

tylin 2019-08-26 13:49 評論0 收藏0