从零构建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文件，用浏览器执行起来.