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. ios--->instrument的leaks来检查内存泄漏

    instrument来检查内存泄漏 1.第一步打开 或者: 然后选择leaks 2.若此时编译出现如下问题,可能是非debug版本造成的,切换成debug版本即可 打开工程的Edit Scheme选项 ...

  2. Spring JSTL 获取后端数据失败。

    显示的jsp页面仍是${XXX}的形式. 解决方法一: 这是因为我们在web.xml中使用的是jsp1.2版本的DTD,在此版本JSTL默认不打开,我们需要手动打开,打开方法: 在相应的JSP头部加入 ...

  3. Nacos 配置MySQL8.0持久化

    问题描述 官网下载的Nacos mysql由于驱动过低只支持5.X版本,使用8.X版本的mysql时无法正常启动 解决办法 克隆nacos源码(branch 1.0.0-RC3) master等分支也 ...

  4. 关于2D渲染的一些小想法

    原文地址 概述 . 这个项目最初的目的是为了尝试解析现有的UI编辑器(MyGUI)导出的UI布局信息,通过ImGUI还原UI渲染.但是在开发过程中,我发现可以借此实现一个编辑器,一个我不断的寻找,但始 ...

  5. LeetCode227:基本计算器II

    感觉自己的思路还不错,比较简单清晰,代码量也比较少,没有用到记录运算符的变量或栈,就想把这个思路发一下博客. 题目: 实现一个基本的计算器来计算一个简单的字符串表达式的值. 字符串表达式仅包含非负整数 ...

  6. Newcoder Wannafly13 B Jxy军训(费马小定理、分数在模意义下的值)

    链接:https://www.nowcoder.com/acm/contest/80/B 题目描述 在文某路学车中学高一新生军训中,Jxc正站在太阳下站着军姿,对于这样的酷热的阳光,Jxc 表示非常不 ...

  7. java6循环结构二

    public class jh_01_回顾与作业点评 { public static void main(String[] args) { int val = 12345; System.out.pr ...

  8. Codeforces Round #617 (Div. 3) D. Fight with Monsters

    D : Fight with Monsters 题目大意 : 有一组数,每个值对应着一个怪物的 hp 值,现在有两个人,一个自己一个对手,每个人有一个攻击值, 两个人轮流攻击怪物,如果是自己将怪物先打 ...

  9. 突破CRUD | 万能树工具类封装

    0.学完本文你或许可以收获 感受一个树工具从初始逐步优化完善的过程 树工具封装的设计思考与实现思路 最后收获一款拿来即用的树工具源代码 对于前端树组件有一定了解和使用过的同学可直接跳跃到第3章节开始. ...

  10. 《Head first设计模式》之策略模式

    策略模式定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 假设有一个模拟鸭子的游戏,游戏中会出现各种鸭子,一边游泳戏水,一边呱呱叫.这个游戏的内部设计了一个 ...