手把手从零开始搭建一个最最简单的vue.js工程
一、先做好准备工作,需要安装一个Node.js
1. 下载符合版本的Node.js文件
https://nodejs.org/en/download/
2. 一路往下安装完成后,打开cmd,分别输入:
node -v
npm -v
如图,即已成功安装
3. 此项为附加项(非必要):由于npm在国内镜像安装缓慢,建议使用淘宝镜像,以后用到npm的地方就用cnpm代替即可,控制台输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
4. 安装完成后可在控制台输入:
cnpm
如弹出图上下半部分等信息,即为安装成功,也可输入:
cnmp -v
查看cnpm的版本信息
二、全局安装vue-cli
在cmd中输入:
cnpm install -g vue-cli
这样以来,vue.js的环境就算安装完成啦
三、终于开始创建工程啦
1. 用cmd进入要存放工程的目录下,输入命令来创建工程:
vue init webpack SatsukiNoVue
其中 SatsukiNoVue 为工程名称,记得 自定义 哦
Project name:项目名称,只能全小写,为什么必须全小写,据说是方便不同系统之间的移植(可移植性?)
Project description:项目说明,随意啦,默认也行
Author:作者名
Vue build:默认选中了Runtime + Compiler(运行时编译),既然他推荐这个,那咱默认
Install vue-router:是否安装官方路由?嗯,装(除非你打算自己写一个)
Use ESLint to lint your code:一种代码规范检测
Pick an ESLint preset:初始化一个代码风格(我这里只能选 Standard 和 AirBNB 两种)
Set up unit tests:安装单元测试。嗯,装
Setup e2e tests with Nightwatch:e2e(自动化)测试。emmmmm,自己决定。。。
四、创建完成之后整体目录结构如下(还没结束哦,差一点点)
五、安装工程所需的依赖包资源(搭建的最后一步啦)
1. 打开cmd,进入刚刚创建的工程目录路径下,输入:
cnpm install
等待完成,完成后会多出一个 node_modules 目录
六、至此,一个白白的vue.js项目搭建完毕
此时可以在cmd中进入工程的根目录,输入:
npm run dev
接下来直接在浏览器中输入:
localhost:8080
便可以访问啦~(是不是很开森 ((´∀`*))ヶラヶラ)