手把手从零开始搭建一个最最简单的vue.js工程

一、先做好准备工作,需要安装一个Node.js

1. 下载符合版本的Node.js文件
https://nodejs.org/en/download/
2. 一路往下安装完成后,打开cmd,分别输入

node -v
npm -v

手把手从零开始搭建一个最最简单的vue.js工程
如图,即已成功安装

3. 此项为附加项(非必要):由于npm在国内镜像安装缓慢,建议使用淘宝镜像,以后用到npm的地方就用cnpm代替即可,控制台输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

手把手从零开始搭建一个最最简单的vue.js工程
4. 安装完成后可在控制台输入

cnpm

如弹出图上下半部分等信息,即为安装成功,也可输入:

cnmp -v

手把手从零开始搭建一个最最简单的vue.js工程
查看cnpm的版本信息

二、全局安装vue-cli

在cmd中输入

cnpm install -g vue-cli

手把手从零开始搭建一个最最简单的vue.js工程
这样以来,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:初始化一个代码风格(我这里只能选 StandardAirBNB 两种)
Set up unit tests:安装单元测试。嗯,装
Setup e2e tests with Nightwatch:e2e(自动化)测试。emmmmm,自己决定。。。

手把手从零开始搭建一个最最简单的vue.js工程

四、创建完成之后整体目录结构如下(还没结束哦,差一点点)

手把手从零开始搭建一个最最简单的vue.js工程

五、安装工程所需的依赖包资源(搭建的最后一步啦)

1. 打开cmd,进入刚刚创建的工程目录路径下,输入

cnpm install

手把手从零开始搭建一个最最简单的vue.js工程
等待完成,完成后会多出一个 node_modules 目录
手把手从零开始搭建一个最最简单的vue.js工程

六、至此,一个白白的vue.js项目搭建完毕

此时可以在cmd中进入工程的根目录,输入

npm run dev

手把手从零开始搭建一个最最简单的vue.js工程
接下来直接在浏览器中输入

localhost:8080

便可以访问啦~(是不是很开森 ((´∀`*))ヶラヶラ)
手把手从零开始搭建一个最最简单的vue.js工程