Vue -cli 入门 --项目搭建(一)

1、 安装node.js环境.

在node.js官网下载稳定版本(https://nodejs.org/en/)

下载完成后点击安装，安装过程很简单，一直next便可，安装完成会自动添加node及npm环境变量。

检验是否安装成功，在cmd输入命令 node -v,回车 及 npm -v,回车，如出现下图所示版本信息，表示安装成功

 

2、安装 Vue-cli

打开cmd命令行工具，输入npm install -g vue-cli,回车 全局安装vue-cli

(注：npm会有点慢，建议更改成国内淘宝的镜像，只换源便可。在cmd输入命令：npm config set registry https://registry.npm.taobao.org)!!!!!!可能电脑会卡!!!!!

 3、构建项目

 1.建立项目

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

打开cmd，进入想要建立项目的目录下，输入：vue init webpack projectname

webpack默认是安装2.0版本，若要安装1.0版本，需在webpack后面加上版本号信息，

vue init webpack#1.0 project-name(安装1.0版本)

projextname是自定义的项目名称，例：我这里命名为 vuedemo

 

Project name:——项目名称

Project description:——项目描述

Author:——做者

Vue build:——构建模式，通常默认选择第一种

Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 不然你会很是痛苦，eslint的格式验证很是严格，多一个空格少一个空格都会报错，因此对于新手来讲，通常不建议开启，会加大开发难度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，能够不用安装

2.安装依赖

 

项目建立完成，打开文件夹能够看到目录结构以下

 

未安装依赖时项目结构

此时，项目已经初具雏形，但还未安装依赖，需打开cmd，进入项目所在根目录下，输入npm install,回车

 

依赖安装中

 

依赖安装结束

咱们此时再打开项目文件夹，能够看到多了node_modules文件夹，里面是各类须要的依赖包

安装依赖后项目结构

3.运行项目

打开cmd，进入到项目所在目录下，输入npm run dev,回车，启动项目

 

运行项目（1）

完成后，监听端口8080, 复制一下路径，在浏览器中打开。

 

 

运行项目（2）

 复制一下路径，在浏览器中打开。

能够在浏览器看到以下画面，恭喜你，已成功构建vue-cli项目，接下来就能够开始开发啦