工程位置:e:\vue\myproject
安装步骤:
node.js--->淘宝镜像---->webpack--->vue-cli脚手架----->用脚手架构建项目
一、那么我们就从最简单的环境搭建开始:
E:\工作文件\vue\node-v10.15.1-x64.msi
安装node.js,从node.js官网下载并安装node(我下载的是node-v10.15.1-x64.msi),安装过程很简单,一路“下一步”就可以了。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。
这里需要说明下,因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响。
2.安装淘宝镜像,打开命令行工具,把这个
你可以使用我们定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm:
npm install-g cnpm--registry=https://registry.npm.taobao.org
复制后右键粘贴到命令行,安装这里是因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候很很慢很慢超级慢,所以就用这个cnpm来安装我们所需要的“依赖”。
安装完成之后输入
cnpm -v
如下图,如果出现相应的版本号,则说明安装成功。
以后就可以使用cnpm 命令下载依赖了
3.安装webpack,打开命令行工具输入:
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
cnpm install webpack -g
安装完成之后输入
webpack -v
我这个版本输入上述命令后,会询问是否先安装webpack-cli,输入y,后等待安装成功。安装过程如图
再次输入webpack -v 即可显示版本号了
4.安装vue-cli脚手架构建工具,打开命令行工具输入:
cnpm install vue-cli -g
安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。
二、通过以上四步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目
在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录:①cd 目录路径 ②如果以安装git的,在相关目录右键选择Git Bash Here
我的安装目录为d:/vue,命令行状态进入上述目录
1.安装vue脚手架输入:格式:vue init webpack 项目名称
vue init webpack myproject
注意这里的“myproject ” 是项目的名称可以说是随便的起名,但是需要主要的是“不能用中文”。过程中eslint输入n,其他y
接下来的过程如图:我猜想每台机器执行结果可能不同,因为我此次安装时就提示下载了chrome驱动
cd 命令进入创建的工程目录,首先cd myproject(这里是自己建工程的名字);
创建完成的“myproject”目录如下:
下面我简单的说明下各个目录都是干嘛的:
启动项目,输入:npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:
注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。
至此简单的一个项目构建完毕....后面我将继续利用这个构建的项目写一个简单的单页面应用。
看到这里给大家推荐一个ide用Atom然后安装vue插件即可,非常之好用