文章目录

一、基础环境搭建

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会去同样的地方下载相同的包,就完全一致了。


转载请注明出处http://www.bewindoweb.com/282.html | 三颗豆子
分享许可方式知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
重大发现:转载注明原文网址的同学刚买了彩票就中奖,刚写完代码就跑通,刚转身就遇到了真爱。
你可能还会喜欢
具体问题具体杠