webpack 创建一个VUE项目

一、创建并初始化VUE项目
1.安装完VUE和nodejs后在指定文件夹根目录生成项目文件夹
在命令行内进入当前文件夹
输入

vue init webpack "你项目的名称(英文)"

其他选项默认


image.png

生成的文件夹


QQ截图20181030144532.png

2.安装配置
image.png

3.安装完毕运行
yarn start
未安装yarn的可直接运行
npm run dev


image.png

4.命令行内的端口号localhost:8081
image.png

至此VUE项目初始化完成。
二、开始在编辑器中创建正式项目
1、在src下创建以下文件
image.png

2.配置rem.js
/* 配置rem */
function remFn() {
  document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'
}
remFn()
/* //当页面发生变化重新配置rem */
window.onresize = remFn

3.删除初始化多余项目
3.1删除components文件夹下的helloworld文件
3.2在app.vue中删除以下内容(如果报错请检查是否存在空格未删除)


image.png

4.让项目先跑起来
npm run dev


image.png

image.png

5.***引入sass
5.1由于vue-cli脚手架没有支持sass所以需要手动安装
cnpm i node-sass sass-loader -D

*注在开发测试环境使用-D/--seve-dev;生产环境使用-S/--seve


image.png

5.2在单文件组件中使用sass方法
<style lang="scss">
      ...
</style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容