1、安装webpack

npm install -g webpack

2、安装sass

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

3、打开vscode的终端,创建vue程序,并创建vue程序

vscode新建终端:ctrl+shift+`,如果已经打开终端,无需新开终端

创建vue程序

vue init webpack myvue

4、配置sass支持

修改文件:build/webpack.base.conf.js

在rules节点中添加如下配置

{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}

5、在style中,增加lang="scss"

不需要使用sass时,可以忽略sass支持的配置

6、运行vue

cd 项目目录
npm run dev

7、生成vue

npm run build

生成的代码,在未修改配置的前提下,在dist目录中

ps.

1、webpack的高版本并没有完全向下兼容,所以在编译时,如果版本不对,可能会导致出现错误

折腾vue--使用vscode创建vue项目(二)的更多相关文章

  1. 在使用vue+webpack模版创建的项目中使用font-awesome

    前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...

  2. Eclipse+Maven创建webapp项目<二> (转)

    Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...

  3. Eclipse+Maven创建webapp项目<二>

    Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...

  4. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  5. (尚018-第二章2.1)Vue使用vue-cli创建模板项目

    2.1.1 1)vue-cli是官方提供的脚手架工具(注意:脚手架本身是个库) 2)github:https://github.com/vuejs/vue-cli 3)作用:从https://gith ...

  6. IntelliJ IDEA 14 创建maven项目二

    前言: 在我的idea14使用maven创建web工程文章介绍了如何运用idea14创建maven项目--但有瑕疵,如下: 今天在群里交流才得知起因: 原来一直这样创建的--但结果都一样,均出现上面的 ...

  7. Eclipse+maven创建webapp项目<二>(转)

    原文地址:http://www.cnblogs.com/candle806/p/3439469.html 1.开启eclipse,右键new-->other,如下图找到maven project ...

  8. 关于VsCode创建Vue基础项目的步骤以及相关问题

    项目创建步骤: 1.  全局安装vue-cli 安装命令: npm install -g vue-cli 在vscode上打开一个终端,然后输入此命令(下为截图): 2. 安装webpack,打包js ...

  9. vue 2.0创建新项目

    参考链接  https://segmentfault.com/a/1190000011275993 背景在安装完node的基础上,机器什么都没安装参考上述链接 一.下载vue $ cnpm insta ...

随机推荐

  1. 浅显易懂的前端知识点(二)——HTTP协议基础

    HTTP 协议的初印象: 是基于 TCP/IP 协议的应用层协议,不涉及数据包的传输,主要规定了客户端和服务器之间的通信格式,默认使用 80 端口. 1 HTTP 协议 0.9 版(1991 年) 是 ...

  2. 求LCM(a,b)=n的(a,b)的总对数(a<=b)

    \(a={p_1} ^ {a_1} *{p_1} ^ {a_1} *..........*{p_n} ^ {a_n}\) \(b={p_1} ^ {b_1} *{p_1} ^ {b_1} *..... ...

  3. 异常处理 | java.lang.IllegalArgumentException: Request header is too large

    背景 今天在自己使用Springboot开发博客系统的时候,在浏览器点击提交markdown文件一直出现以下异常: java.lang.IllegalArgumentException: Reques ...

  4. 实验12: OSPF

    实验9-1:单区域点到点链路的OSPF 实验目的通过本实验可以掌握:(1)在路由器上启动OSPF 路由进程(2)启用参与路由协议的接口,并且通告网络及所在的区域(3)度量值cost 的计算(4)点到点 ...

  5. top100tools

    Top 100 Tools for Learning 2013 2142 EmailShare Here are the Top 100 Tools for Learning 2013 –  the ...

  6. Visual Studio 常见问题

    VS 2013相关问题 VS 2013 Ultimate Update 5 下载地址: 英文版: vs2013.5_ult_enu.iso SHA-1:918EA4A911858D32C9771480 ...

  7. jQuery初学者笔记 一

    jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素,并对选取的元素进行操作 基础语法: 所有jQuery语句用"$"符号 ...

  8. logstash split插件的使用(将一个事件拆分成多个事件)

    kafka中的原始数据格式(1条数据) { "body": { "cwd": "/home/test/", "monitor&qu ...

  9. Codeforces_799

    A.求两个时间比较一下. #include<bits/stdc++.h> using namespace std; int n,t,k,d; int main() { ios::sync_ ...

  10. BZOJ1301 字符加密Cipher (后缀数组)

    题意: 把所有循环字符串的后缀排名,输出这n<1e5个排名的最后一个字符 思路: 将该字符串拼接,按照排名顺序输出后缀开头在前一个字符串的情况中的“最后一个字符”即可 代码: #include& ...