初探Vue之环境搭建

hiYoHoo 发布于2019-08-20 14:04 / 729人阅读

摘要：最近得闲，想总结总结最近在学习上的一些心得，毕竟作为新手多写多练好处多多，话不多说，马上开始前端工程化为开发带来了很多便利，但实际是，环境的配置也要大费周章一番。

最近得闲，想总结总结最近在学习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的文件。具体的代码以后再上吧，没写完全。

以上是我学习中的一些小问题，说明不当之处还请高手们多多指教！多多交流

idc机房托管超融合服务器快速搭建php运行环境之wampserver 网络环境之vps 云服务器搭建vue项目阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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