万事开头难--俗语

前端项目初始化

安装Node.js依赖环境

笔者用的MacBook,所以直接使用brew来进行安装,其他的操作系统请直接查看官方安装指南。

# 安装Node.js,这里安装了最新版本8.1.0
brew install node

# 检查安装版本
node -v
v8.1.0

# 检查npm是否已经安装
npm -v
5.0.3

创建项目

# 项目目录配置
mkdir SimpleBlog
cd SimpleBlog

# 安装阿里定制工具cnpm 替换 npm,使用阿里的免费源 
npm install -g cnpm registry=https://registry.npm.taobao.org

# 全局安装 vue-cli
# 安装完成后,运行 vue -V 命令来检查是否安装成功
cnpm install vue-cli -g

# 使用 vue-cli 进行项目初始化
# 请按照提示全部按照默认选择操作
# 项目名称输入simple-blog-vue
# 其余问题选择回答Y
# 其中webpack是框架的模板名称,更多模板可以到 https://github.com/vuejs-templates 进行查看
vue init webpack simple-blog-vue

# 进入项目目录,安装依赖
cd simple-blog-vue
cnpm install

# 运行调试启动命令,如果浏览器自动打开并显示初始界面,则表示初始化完成。
npm run dev

# 我们还可以尝试运行下打包命令
# 打包完成的内容默认生成在dist目录下,只需要将整个目录下文件(不包含dist)拷贝至服务器就行了。
npm run build

  ......

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

# 自动化测试命令,会看到以下内容输出
npm run test

......

[Test] Test Suite
=====================

Running:  default e2e tests
 ✔ Element <#app> was visible after 80 milliseconds.
 ✔ Testing if element <.hello> is present.
 ✔ Testing if element <h1> contains text: "Welcome to Your Vue.js App".
 ✔ Testing if element <img> has count: 1

OK. 4 assertions passed. (2.821s)

使用vue-cli按照上述命令搭建的脚手架,使用了Webpack来进行打包编译,Babel插件来支持ES6ESLint静态代码检查,整合KarmaMochaChai单元测试以及Nightwatch端到端(e2e)自动化测试框架。是一个非常完备的可以进行大型项目开发的项目框架。

其他问题

  • 如果浏览器弹出后没有看到页面,检查8080端口是否被占用或者包是否没有安装成功。可以修改config-->index.js中找到port: 8080这行(默认应该在26行),修改成没有被占用的端口。

  • 对于包没有安装成功而导致报错的彻底解决办法,就是删掉目录内的node_modules目录,然后在项目根目录下重新执行cnpm install命令。


到此前端项目的框架算是搭建完成了。