发表于： 2018-10-01 22:34:39
1 821
今天完成的事情：
想来想去，没有日报总感觉自己很鸽，哈哈哈，所以我又开始水日报了
换了新电脑，先记录一下mac的前端开发环境，方便日后重置的时候快速安装
明天计划的事情：
学习一下关于css画布和动效
移动端性能的取舍，多栏布局
遇到的问题：
收获：
mac安装任何来源
sudo spctl --master-disable
Nodejs地址
https://nodejs.org/zh-cn/
Cnpm安装命令
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
安装淘宝地址镜像
安装vue脚手架工具
sudo npm install vue-cli -g
创建项目
vue init webpack + name
安装项目依赖 npm install
vue项目中安装scss
执行安装依赖
npm install node-sass --save-dev
npm install sass-loader --save-dev
基础的安装完了，差个axios
npm命令
npm install X:
- 会把X包安装到node_modules目录中
- 不会修改package.json
- 之后运行npm install命令时，不会自动安装X
npm install X –save:
- 会把X包安装到node_modules目录中
- 会在package.json的dependencies属性下添加X
- 之后运行npm install命令时，会自动安装X到node_modules目录中
- 之后运行npm install
–production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中
npm install X –save-dev:
- 会把X包安装到node_modules目录中
- 会在package.json的devDependencies属性下添加X
- 之后运行npm install命令时，会自动安装X到node_modules目录中
- 之后运行npm install–production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中
简单总结，安装依赖的时候使用-save-dev较好
目录结构
├── README.md 项目介绍├── index.html 入口页面├── build 构建脚本目录│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面│ ├── build.js 生产环境构建脚本│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新│ ├── dev-server.js 运行本地开发服务器│ ├── utils.js 构建相关工具方法│ ├── webpack.base.conf.js wabpack基础配置│ ├── webpack.dev.conf.js wabpack开发环境配置│ └── webpack.prod.conf.js wabpack生产环境配置├── config 项目配置│ ├── dev.env.js 开发环境变量│ ├── index.js 项目配置文件│ ├── prod.env.js 生产环境变量│ └── test.env.js 测试环境变量├── mock mock数据目录│ └── hello.js├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息├── src 源码目录 │ ├── main.js 入口js文件│ ├── app.vue 根组件│ ├── components 公共组件目录│ │ └── title.vue│ ├── assets 资源目录，这里的资源会被wabpack构建│ │ └── images│ │ └── logo.png│ ├── routes 前端路由│ │ └── index.js│ ├── store 应用级数据（state）│ │ └── index.js│ └── views 页面目录│ ├── hello.vue│ └── notfound.vue├── static 纯静态资源，不会被wabpack构建。└── test 测试文件目录（unit&e2e） └── unit 单元测试 ├── index.js 入口脚本 ├── karma.conf.js karma配置文件 └── specs 单测case目录 └── Hello.spec.js
返回列表
评论