一、基础环境搭建
1、搭建好基础运行时环境:Node.js
可以参考菜鸟教程的《Node.js安装配置》
(1)去Node.js官网下载对应的安装包,windows下载msi比较方便。
一步步安装就能完成了。如果发现有任何问题,直接采用bin安装的方式,下载bin二进制,然后直接类似安装java一样配置环境变量即可。
现在的node.js已经会顺带安装超火的包管理器npm(Node Package Manager)了,然后查看版本号,验证它们是否安装成功:
node --version
npm -v
(2)永久使用淘宝镜像源
# 永久配置,会写入配置文件
npm config set registry https://registry.npm.taobao.org
# 查看当前仓库地址
npm config get registry
2、认识webpack
webpack用于打包,可以将一些高级语法编写的文件按一定规范去编译成标准HTML、JS、CSS。
webpack安装后会生成node_modules目录,里面包含了各种插件的代码。同时包含如下功能模块:
1、devtool:动态修改代码后能够实时显示在页面上,不用重启服务器
2、webpack-dev-server:node.js实现的web服务器,用于前端调试或者前后端分离
3、loaders:高级语法解析器,例如SCSS转css
4、babel:兼容语法编辑
5、plugins:插件
二、安装vue,运行Helloworld
(1)cmd切换到一个干净的目录
(2)安装vue命令行工具
# -g是全局安装,这里安装vue命令行工具
npm install -g vue-cli
我用的vue是2.x版本
(3)初始化一个基于webpack的新项目
# 创建项目
vue init webpack <项目名称>
期间会有几个选项:
- Project name:项目名称(不能用大写),例如bwb
- Project description :项目简介 ,例如 bwb
- Author:作者,例如bewindoweb
- Runtime + Compiler / Runtime only:运行时+编译器或只要运行时,当然选都要,第一个
- Install vue-router?是否需要vue路由组件,路由相当于管理URL跳转,要,Y
- Use ESLint to lint your code?是否用ESLint检查语法?前端刚入门,格式习惯很重要,要,Y
- Standard (https://github.com/standard/standard) / Airbnb (https://github.com/airbnb/javascript) / none (configure it yourself):我选的第一个语法模板
- Set up unit tests?是否安装单元测试,要,Y
- Pick a test runner (Use arrow keys):选择Jest
- Setup e2e tests with Nightwatch? Nightwatch是一个高级的自动化测试框架了,还没摸清门路,以后再要,选n
- Should we run `npm install` for you after the project has been created? 是否要帮你install,选NPM即可,会帮你install
会按项目名生成文件夹,并产生如下文件:
先不管,先启动服务器:
cd bwb
npm run dev
即可通过http://localhost:8080看到如下页面:
4、用webstorm开发
打开WebStorm,打开该项目文件夹,点右上角Add Configuration,添加两个环境:
一个是开发环境,run dev:
还有一个是编译环境,run build。
添加好之后,选择dev,它会自动帮你去执行npm run dev的命令,十分方便:
5、认识项目文件
(1)build
该目录是webpack的目录,区分了很多类似product、dev等等环境,类似springboot的application.yml。
(2)config
常量配置,提供给build中的文件使用。
(3)node modules
webpack的插件库,所有安装的插件都在这里,类似java的lib文件夹,正如WebStorm给它的注解“library root”含义一样。
(4)src
核心工程代码目录,这个可以后面在分析。
(5)static
静态资源文件。.gitkeep是一个空文件,是为了让git能够追踪维护这个目录(git会忽略掉空目录,有了.gitkeep,它就不是空目录了)。
(6)test
前面配置的时候安装的单元测试,我暂时还不想写单元测试。
(7).babelrc
babel配置文件,后续开发基本不会动了,Babel官方文档
(8).editorconfig
编辑器风格,比如每行代码前面空格是几个等等。
(9).eslintignore
ESLint语法编辑器不检查的文件和目录,例如生成目录/dist就不需要检查。
(10).eslintrc.js
ESLint配置,后续不会动了,见ESLint官方文档
(11).gitignore
git不追踪的文件和目录
(12).postcssrc.js
CSS预处理插件,写过纯CSS的都知道,要兼容多个浏览器,有时候一条语句就要写多个浏览器的写法。postcssrc.js配置了AutoPrefixer,可以解决浏览器兼容问题。PostCSS官方文档
(13)index.html
首页入口
(14)package.json
类似maven的pom.xml,用于npm的包管理,当执行npm install的时候,会根据这里面的清单去安装依赖包。
有一些很特别的写法,例如:
"shelljs": "^0.7.6"
这里的^指的是向后兼容,意思是只要大版本号(第一个数字)相同,你安装更高的版本也没问题。
(15)package-lock.json
实际上这个设计并不好,不应该随意地升级版本,会造成不同机器上运行结果不一致。因此package-lock.json明确指定了是在哪里下载的,版本号多少,例如:
"shelljs": {
"version": "0.7.8",
"resolved": "https://registry.npm.taobao.org/shelljs/download/shelljs-0.7.8.tgz",
"integrity": "sha1-3svPh0sNHl+3LhSxZKloMEjprLM=",
"dev": true,
"requires": {
"glob": "^7.0.0",
"interpret": "^1.0.0",
"rechoir": "^0.6.2"
}
这样当有package-lock.json文件时,npm install会去同样的地方下载相同的包,就完全一致了。