从零构建vue项目(一)--搭建node环境,拉取项目模板

本文是基于vuecli2搭建的项目.

1. 下载安装nodejs    

　　地址：https://nodejs.org/en/download/

　　选择安装版windows .msi, 不要选择压缩版

　　下载完成后，下一步-->下一步-->安装完成

　　　　npm:  node pageage mangemen node.js的包管理器, 集成到node.js中了.

　　验证node是否安装成功:

　　　　打开命令行(windows)或终端(mac),在命令行(终端)中输入：

　　　　node -v 如果提示出版本信息则说明node安装成功

　　　　npm -v 如果提示出版本信息则说明npm安装成功

　　如果输入npm -v没有反应, 删除C:\Users{账户}\下的.npmrc文件就可以了.

2. 安装淘宝镜像

在终端输入：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

根据提示输入密码，等待安装成功

验证淘宝镜像是否安装成功：

在终端输入cnpm -v  如果提示出版本信息则说明cnpm淘宝镜像安装成功

cnpm安装成功后，以后npm install 命令用cnpm install代替.

也可以全局安装yarn, 后续用yarn命令

3. 安装yarn

　　yarn是一个包管理器, 与npm很多功能都是相同的,数据格式也一致,并且更加轻量化, 命令也比较简洁, 所以包管理器可以在npm和yarn中选其一.

　　详见yarn官方文档

4. 安装vue脚手架：

　　vue-cli:基于node.js的开发环境的脚手架.

　　脚手架:有人将开发过程中用到的工具和环境都配置好了,直接可以做开发而不用考虑搭建这些工具环境了.

　　在终端中输入命令： cnpm install vue-cli –g (mac中有install的全部要加sudo)

　　　　(-g全局安装，全局安装即就将当前的工具安装在了node的安装目录下)

　　验证vue-cli是否安装成功:

　　在终端输入vue -V  如果提示出版本信息则说明vue-cli安装成功

---------------以上步骤都是工具,只需安装一次,以下步骤是每个项目的过程----------------

5. 拉取项目模版

新建一个存放项目的文件夹(如：Vue_Code7)，在该文件夹下打开终端

通过下面的简单的Linux命令进入到指定的文件夹：

ls  列出当前所在目录下的所有文件及文件夹

cd xxx 进入到当前目录下的指定的文件夹

cd ../ 返回上一级目录

在指定文件夹下打开终端后，在终端中输入：

sudo vue init webpack my-project

(webpack是官方模版，my-project是自定义的项目名称)

也可以自定义模板

回车 intall vue-router? 是否装vue-router(看项目需要)

Use ESLint to lint your code? n

Set up unit tests 是否安装小测试

Pick a test runner

Setup e2e tests with Nightwatch?

Should we run 'npm install' for you after the...? no,I will ....进入第5步

6. 下载安装项目依赖

如果在拉取模版时没有下载安装依赖，则需要执行如下操作

1）进入项目所在的项目文件夹

cd my-project(项目名称)

新打开的项目需要先安装下依赖

2）通过下面的命令安装依赖：

sudo cnpm install

3) mac系统无法保存,打开项目根目录,显示简介,解锁,全部修改为读与写,应用到所有项目,上锁.

npm是国外服务器的,用来安装很慢, cnpm是淘宝镜像,用来安装很快

7.启动项目

在项目文件夹下打开终端,运行下面的命令:

npm run dev

　　如报错,试下下面的命令:

　　npm install --save-dev webpack-dev-server@2.9.7

　　启动完成将会提示http://localhost:8080这样的地址,也就是运行地址.

　　在package.json中dev中配置--open 'Google Chrome'就会自动打开浏览器运行,不加浏览器名就是打开默认浏览器.

　　　　"scripts": {

　　　　　　"dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js",

　　　　...}

　　windows系统: 打开根目录,选中文件右键打开命令窗口

　　mac:系统偏好设置,键盘,快捷键,服务,终端勾选.打开根目录,选中文件右键打开命令窗口

修改运行的端口和域名,可以在config/index.js中修改:

dev{

host: '127.0.0.1',    // can be overwritten by process.env.HOST

port: 8080,

}

8. 项目运行的流程

第一步：执行npm run dev,

即执行 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

第二步：使用webpack工具(打包捆绑工具)根据build/webpack.dev.conf.js配置文件将项目打包到内存中

webpack根据配置文件加载所配置loader对入口文件及其所引用到的文件进行编译，

编译完成后webpack根据入口出口配置，将所有用到的文件打包到出口文件(app.js)

在利用所配置的插件(HtmlWebpackPlugin)将出口文件自动插入到项目中的index.html

最后在项目目录下启动devServer服务器

　　第三步：服务启动后，自动打开项目下的index.html文件，用浏览器执行起来.