Vue项目搭建
Vue 是一套用于构建用户界面的渐进式框架,本篇博客讲述如何搭建一个基础的Vue项目
开发环境
- 系统环境：windows10
- 开发工具：Visual Studio Code或HBuilderX或IDEA，根据个人喜好选择
- Node JS
Node JS
Node JS是一个JavaScript 运行环境，为我们提供NPM依赖管理和编译打包工具，
下载地址：http://nodejs.cn/download
- 按照相应的操作系统下载相应的安装包，执行其中的可执行文件node.exe
- 将Node添加到系统换将变量中
- 验证是否安装成功，执行以下命令，如出现版本信息则说明安装成功
npm -v
- npm旧版本升级命令
npm install npm -g
安装webpack打包工具
npm install webpack -g
注：-g 代表全局安装
安装vue-cli
vue-cli是vue脚手架项目初始化工具
npm install vue-cli -g
使用淘宝镜像
NPM使用的是国外中央仓库，其在国内也有可用镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装成功后可用cnpm替代npm命令，如：cnpm install webpack -g
安装Yarn
Yarn是Facebook发布的node.js包管理器，比npm快，如若忍受不了npm的速度，可以考虑使用Yarn
npm i yarn -g -verbose
在Yarn安装完毕后建议切换为使用淘宝镜像
yarn config set registry https://registry.npm.taobao.org
创建项目
生成项目
环境搭建完成之后，接下来通过vue-cli来生成项目
vue init webpack 项目名
根据提示输入项目信息，等待项目生成：
项目结构图如下所示：
安装依赖
进入项目根目录，执行yarn install(也可用npm install 或 cnpm install)安装依赖包
cd coisini-ui //进入项目根目录
yarn install //安装依赖
安装完成后项目根目录下会生成node_modules文件夹，这个目录就是依赖包统一存放的目录
启动运行
接下来用开发工具Visual Studio Code或 HBuilderX 或 IDEA 打开项目，执行以下命令运行项目：
npm run dev
浏览器访问对应地址：
到此，基础VUE基础项目搭建完毕。
