搭建vue项目环境

前言

在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都有点阴影...)。
这是我第一次使用vue开发项目,在项目开始前1周,我才开始看vue的官方文档。我在安装vue.js并搭建vue项目的过程中遇到了各种各样的问题,并通过百度mother找到了许多不同的解决方法。
当时看了众多的博文,感觉写的并不详细,有些还有点乱,所以想写一个比较完善的博文,既作为项目经验的总结,也希望能帮助刚入vue的小伙伴。

安装node环境

关于如何安装node环境,请查看 windows系统下安装 node.js (node.js安装及环境配置)

安装webpack

  1. 打开命令行工具
    npm install webpack -g(-g表示全局安装)
  2. 检查是否安装成功:
    webpack -h/v
    安装成功会出现版本信息,如下图所示

安装vue-cli 脚手架构建工具

  1. 打开命令行工具
    npm install vue-cli -g(-g表示全局安装)
  2. 检查是否安装成功:
    vue -V
    安装成功会出现版本信息,如下图所示

构建项目

  1. 在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录:①cd 目录路径 ②如果以安装git的,在相关目录右键选择Git Bash Here
  2. 安装vue脚手架输入:
    vue init webpack myProject
    注意这里的“myProject” 是项目的名称(可以随便起名字,但是不能是中文)。
vue init webpack myProject    ---------------- 这个是那个安装vue脚手架的命令
? Project name (myProject)    ---------------- 项目名称
? Project description (A Vue.js project)     ----------------项目描述
? Author  authorName       ---------------- 项目创建者
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)  y    ----------------  是否安装Vue路由,也就是以后是spa(单页面应用需要的模块,要用输入y,不用输入n,可以在用的时候再安装)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n   ---------------- 是否启用eslint检测规则(eslint是一个代码语法规范检查的工具,选择no就不会把语法规范功能加进webpack编译的流程里。建议选no)
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)    ---------------- 是否启用单元测试(可加可不加)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y       ----------------  是否启用单元测试
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "myProject".
To get started:     ---------------- 这里说明如何启动这个服务
    cd exprice        ---------------- 进入项目文件夹
    npm install      ---------------- 下载依赖
    npm run dev   ----------------  启动项目
  1. 进入项目文件夹
    cd myProject
  2. 安装项目依赖:
    npm install
  • 因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。
  • 如果安装依赖时间太长或者安装依赖总是失败的话,建议使用淘宝镜像安装。
  • 安装淘宝镜像
    npm install -g cnpm --registry="https://registry.npm.taobao.org"
  • 安装好淘宝镜像后就可以使用cnpm代替npm(据说淘宝镜像会缺失一些依赖库,可以先用淘宝下载依赖,如果下载完有缺失库的话,再用npm下载缺失的库就行了)
  • 以下是安装完依赖后的截图:
  • 安装项目需要的依赖
npm install --save-dev normalize.css
npm install --save-dev element-ui -S    安装element-UI,实际这样安装的element-ui并不是最新版本,有很多属性无法使用
npm install --save-dev 依赖包@版本号    安装指定版本的依赖包
  1. 启动项目(这是第5步,不知道为啥变成了1...)
    npm run dev
  2. 打包项目(这是第6步.)
    npm run build

项目目录文件说明

├── index.html                                 入口页面
    ├── build                                      构建脚本目录
    │   ├── build-server.js                  运行本地构建服务器,可以访问构建后的页面
    │   ├── build.js                             生产环境构建脚本
    │   ├── dev-client.js                     开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
    │   ├── dev-server.js                   运行本地开发服务器
    │   ├── utils.js                             构建相关工具方法
    │   ├── webpack.base.conf.js            wabpack基础配置
    │   ├── webpack.dev.conf.js               wabpack开发环境配置
    │   └── webpack.prod.conf.js             wabpack生产环境配置
    ├── config                                          项目配置
    │   ├── dev.env.js                               开发环境变量
    │   ├── index.js                                  项目配置文件
    │   ├── prod.env.js                             生产环境变量
    │   └── test.env.js                              测试环境变量(启用单元测试才有该文件)
    ├── package.json                              npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
    ├── src                                              项目源码目录    
    │   ├── main.js                                  入口js文件
    │   ├── app.vue                                根组件
    │   ├── components                          公共组件目录
    │   │   └── helloWorld.vue
    │   ├── assets                               资源目录,这里的资源会被wabpack构建
    │   │   └── logo.png
    │   ├── routes                                前端路由
    │   │   └── index.js
    │   ├── store                                  应用级数据(state)
    │   │   └── index.js
    │   └── views                           页面目录
    │       ├── hello.vue
    │       └── notfound.vue
    ├── static                              纯静态资源,不会被wabpack构建。
    └── test                                测试文件目录(unit&e2e,启用单元测试才有该文件)
        └── unit                            单元测试
            ├── index.js                    入口脚本
            ├── karma.conf.js               karma配置文件
            └── specs                       单测case目录
                └── Hello.spec.js

安装过程中遇到的问题及解决办法

  1. 在遇到错误的时候,先检查一下npm,vue-cli的版本,有时候会因为不是最新版本而报错
npm update -g               更新npm
npm update vue-cli        更新vue-cli
npm view vue-cli            查看全局的vue-cli的信息
  1. 遇到一下问题,表示你没有安装该模块,安装上就可以了
Module build failed: Error: Cannot find module '模块名'

总结

以上就是一个搭建vue项目的完整流程了。由于时隔太久,在安装时遇到的其他问题,有些想不起来了。如果看文的诸位遇到了问题,不要大意的留言吧(要把问题表述清楚哦~),我看到了就会回答的。
如果在文中我有写错的地方,请不吝指教,谢谢~

posted @ 2018-01-11 16:07 桃之夭夭~ 阅读(...) 评论(...) 编辑 收藏