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. Spring注解开发系列VII --- Servlet3.0

    Servlet3.0简介 Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若干新特性用 ...

  2. 一道面试题引发的对 Java 内存模型的一点疑问

    一道面试题引发的对Java内存模型的一点疑问 问题描述 如上图所示程序,按道理,子线程会通过 num++ 操作破坏 while 循环的条件,从而终止循环,执行最后的输出操作.但在我的多次运行中,偶尔会 ...

  3. 《Android Studio实战 快速、高效地构建Android应用》--四、Git入门

    Git版本控制系统(VCS)是分布式的,仓库的每一个副本均包含项目的完整历史 安装Git 下载 下载地址:http://git-scm.com/downloads 选择适合自己操作系统的来下载 如果下 ...

  4. 《 Java 编程思想》CH06 访问权限控制

    访问控制(或隐藏具体实现)与"最初的实现并不恰当"有关. 重构即重写代码,以使得它更可读,更容易理解,并因此而更具维护性. 在面向对象设计中需要考虑一个基本问题:"如何把 ...

  5. 🔥SpringBoot图文教程2—日志的使用「logback」「log4j」

    有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 文章结尾配套自测面试题,学完技术自我测试更扎实 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例 ...

  6. Django模型中的admin后台管理无法显示字段

    在执行django后台管理时,登陆到http://127.0.0.1:8000/admin/,进入页面后没有对应的字段显示.请解决? 代码: models.py from django.db impo ...

  7. Codeforces_837

    A.扫一遍. #include<bits/stdc++.h> using namespace std; int n; string s; int main() { cin >> ...

  8. HDU_5692_dfs序+线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=5692 这道题真的是看了题解还搞了一天,把每条路径后序遍历按1-n重新标号,储存每个点在哪些路径中出现过(l和r数 ...

  9. 题解 CF1294F 【Three Paths on a Tree】

    \[ Preface \] 打比赛的时候先开了 F 题(雾 然后一眼看出 F 题结论,最后居然因为没有判重,交了三次才过. \[ Description \] 给出一棵无权树(可理解为边权为 \(1\ ...

  10. CVE-2019-0199:Apache Tomcat DDOS

    CVE-2019-0199:Apache Tomcat DDOS 0X00漏洞概述 Apache Tomcat HTTP/2拒绝服务漏洞,该漏洞是由于应用服务允许接收大量的配置流量,并且客户端在没有读 ...