vue常用开发工具
- vscode
- webstorm (本教程使用开发工具)
- atom
开发环境搭建
一、安装Node.js环境(类似于java要安装jdk等运行环境一样)
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
Node.js 的包管理器 npm,是全球最大的开源库生态系统。
Node.js下载地址:Node.js中文网下载地址
根据需要进行下载。
二、下载完成以后进行安装,直接双击运行安装即可
安装时根据需要更换安装目录
三、检验Node.js是否安装成功
首先查看安装目录情况:
然后打开docs管理工具,输入node -v,看是否输出版本号:
四、安装包管理器npm / cnpm
如果大家做过java开发,就会知道在做java web开发时会引入许多依赖文件,如果自己一个一个去下载会很麻烦,所以我们一般都会使用maven进行管理,npm / cnpm的作用就类似于maven。
在安装Node.js的时候,会默认安装好了npm,通过docs管理工具查看:npm -v
同样类似于maven仓库,npm也有一个仓库,仓库同样需要翻墙从外网下载,从外网下载有时会速度太慢,还可能下载失败,所以国内就搭建了镜像网站,方便我们下载,所以需要安装镜像网站的命令 cnpm(和npm命令互通),执行以下命令进行安装:
npm install -g cnpm --registry=https://registry.npm.taobao.org
五、安装打包工具webpack
1、什么是webpack,为什么要使用它
webpack是一个模块打包器。WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。现有的模块打包器不适合大项目(大单页面应用)程序。代码分割和静态资源无缝模块化的迫切需求,催生了一个新的模块打包器。 我试图扩展现有的模块打包器,但是它没能实现所有的目标。
- 把依赖树切分成块,实现按需加载。
- 保持低初始加载时间
- 每个静态资源都能是一个模块
- 具备把第三方库集成为模块的能力
- 具备打包器每个部分几乎都能自己定制的特点。
- 适合大型项目。
2、安装webpack
npm install webpack -g
六、安装全局 vue-cli 脚手架
类似于maven创建项目时的模板工具。
npm install --global vue-cli
安装完成以后通过命令查看是否安装成功:vue -V
七、新建一个工程,看环境是否配置成功
一 、使用2.0创建项目的过程
1、查看 vue-cli 的版本
2、新建一个vue工作目录,并切换到工作目录下
3、新建helloworld项目
// helloworld是项目名称
vue init webpack helloworld
在命令行输入命令然后回车
然后等待安装成功即可。
4、安装完成以后,进入项目目录,使用命令 npm run dev 执行
启动成功。
在浏览器中输入:http://localhost:8080/ 即可看到效果。
├── README.md // 项目说明文档
├── node_modules // 项目依赖包文件夹
├── build // 编译配置文件,一般不用管
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 项目基本设置文件夹
│ ├── dev.env.js // 开发配置文件
│ ├── index.js // 配置主文件
│ └── prod.env.js // 编译配置文件
├── index.html // 项目入口文件
├── package-lock.json // npm5 新增文件,优化性能
├── package.json // 项目依赖包配置文件
├── src // 我们的项目的源码编写文件
│ ├── App.vue // APP入口文件
│ ├── assets // 初始项目资源目录,回头删掉
│ │ └── logo.png
│ ├── components // 组件目录
│ │ └── Hello.vue // 测试组件,回头删除
│ ├── main.js // 主配置文件
│ └── router // 路由配置文件夹
│ └── index.js // 路由配置文件
└── static // 资源放置目录
└── test // 我们的项目的单元测试文件
二、使用3.0创建项目的过程
1、首先升级脚手架
// 注意管理员权限
npm i -g @vue/cli
安装完成,查看版本号:vue -V
2、创建项目helloworld3
vue create helloworld3
默认安装就是安装 babel 和 eslint,一直往下enter即可。因为不需要那么多配置,这里选择手动安装。
选择要安装的配置(注意: Linter / Formatter 尽量不要选,会经常报格式不正确警告和报错,如果无所谓也可以安装)
注意:在docs命令行下,通过上下进行移动,通过space进行插件的选择/不选择
babel:一个javascript转译器,将最新版的js语法(es6、es7)转换为现阶段浏览器可以兼容的js代码
typescript:作用有些类似于babel,拥有类型检查能力和面向对象新特征。
PWA:渐进式WEB应用
Router:路由,设置url,使不同的url显示不同的页面
Vuex:作用类似于全局对象,但是并不完全相同。
CSS Pre-processors:css预处理器
Linter / Formatter:代码规范标准 // 注意:尽量不选
Unit Testing:单元测试
E2E Testing:e2e测试
选择css预处理方式:
CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
这里说下 stylus :来自于Node.js社区,主要用来给Node项目进行CSS预处理支持,不过在使用人群上不如Sass和LESS。
保存配置,方便下次一键配置:
等待生成项目:
安装成功:
3、启动项目进行验证
效果图:
4、通过可视化UI进行创建,启用命令 vue ui
基本步骤同使用命令行步骤,不再过多叙述。
5、3.0整体目录机构(build 和 config)
├── public // 项目公共文件夹
│ └── favicon.ico // 项目配置文件
│ └── index.html // 项目入口文件
├── src // 我们的项目的源码编写文件
│ ├── assets // 基础样式存放目录
│ │ └── logo.png // 基础图片文件
│ ├── components // 组件存放目录
│ │ └── HelloWorld.vue // helloworld组件
│ ├── views // view存放目录
│ │ ├── About.vue //about 页面
│ │ └── Home.vue //Home 页面
│ └── App.vue // App入口文件
│ └── main.js // 主配置文件
│ └── router.js // 路由配置文件
│ └── store.js // Vuex store配置文件
├── tests // 测试文件夹
│ ├── unit // 单元测试
│ │ ├── .eslintrc // 基础图片文件
│ │ └── HelloWorld.spec.js
└── babel.config.js // babel 配置文件
└── package.json // 项目依赖包配置文件
└── package-lock.json // npm5 新增文件,优化性能
└── postcss.config.js //
└── README.md // 说明文档