折腾vue--使用vscode创建vue项目(二)
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项目(二)的更多相关文章
- 在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...
- Eclipse+Maven创建webapp项目<二> (转)
Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...
- Eclipse+Maven创建webapp项目<二>
Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
2.1.1 1)vue-cli是官方提供的脚手架工具(注意:脚手架本身是个库) 2)github:https://github.com/vuejs/vue-cli 3)作用:从https://gith ...
- IntelliJ IDEA 14 创建maven项目二
前言: 在我的idea14使用maven创建web工程文章介绍了如何运用idea14创建maven项目--但有瑕疵,如下: 今天在群里交流才得知起因: 原来一直这样创建的--但结果都一样,均出现上面的 ...
- Eclipse+maven创建webapp项目<二>(转)
原文地址:http://www.cnblogs.com/candle806/p/3439469.html 1.开启eclipse,右键new-->other,如下图找到maven project ...
- 关于VsCode创建Vue基础项目的步骤以及相关问题
项目创建步骤: 1. 全局安装vue-cli 安装命令: npm install -g vue-cli 在vscode上打开一个终端,然后输入此命令(下为截图): 2. 安装webpack,打包js ...
- vue 2.0创建新项目
参考链接 https://segmentfault.com/a/1190000011275993 背景在安装完node的基础上,机器什么都没安装参考上述链接 一.下载vue $ cnpm insta ...
随机推荐
- 吉哥系列故事——恨7不成妻(数位dp)
吉哥系列故事--恨7不成妻 传送门 Problem Description 单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥 ...
- 如何理解 HTMLTestRunner 中 test (result)?UnitTest是如何运行的?
我们在用Unittest框架时,生成html格式的报告一般都是用HTMLTestRunner.py这个第三方库,大概使用方法如下: with open(config.report_file, 'wb' ...
- 实验7:交换机IOS升级
交换机IOS升级首先需要有IOS文件,如果没有备份原文件的话,可以找个同一版本的IOS来替代. 第一种方法:X-Modem 以前我曾经尝试过一种方法,就是当Flash被删除后,启动无法进入系统,可以用 ...
- objectarx 统计面积
除了最后一个输出面积到excel没做,其他都是做了的.只支持AcDbPolyline和AcDbCircle.这是我模仿网上的动态图做的,主要是为了练习.下面我把自己的一些心得分享出来.使用到的一些帮助 ...
- 2018icpc南京网络赛-L Magical Girl Haze (分层图最短路)
题意: 有向图,可以把k条路的长度变为0,求1到n的最短路 思路: 将图复制k份,一共k+1层图,对于每一条i→j,都连一条低层的i→高层的j,并且权值为0 即对每一对<i,j,w>,都加 ...
- SpringBoot Jpa 自定义查询
SpringBoot Jpa 自定义查询 持久层Domain public interface BaomingDao extends JpaRepository<BaomingBean,Inte ...
- Linux学习2-云服务器上安装java和tomcat环境
在linux上部署java的项目,首先要安装JDK和Tomcat,具体要求怎么操作呢,我们一起来学习吧! JDK的安装步骤如下: 1.首先我们从官网下载jdk-8u231-linux-x64.rpm安 ...
- java中list的sort()功能如何使用?如果倒序如何正序?
list.sort()接收一个Comparable接口,其中compare方法是必须实现的,int compare(T o1, T o2);,它接受两个参数:o1,o2. o2表示list排序前的前值 ...
- Vue实战之【企业开发常见问题】
1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 问题描述: 遇到动态路由如:/page/:id 从/page/1 切换到 /page/2 发现页面组件没有更新 解 ...
- python上获得随机字符
import random import string print(string.ascii_letters) # 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNO ...