基于vue的web项目搭建（二）（web脚手架搭建）

基于vue的web项目搭建（二）（web脚手架搭建）

一、操作流程

全局安装淘宝镜像

全局更新npm

全局安装vue脚手架, 即vue-cli

全局指定安装vue、elementui版本

• 全局安装淘宝镜像

在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

在Windows命令行中, 执行：

npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org

三、全局更新npm

在Windows命令行中, 执行：

npm i npm@latest -g

四、全局安装vue脚手架, 即vue-cli

在Windows命令行中, 执行：

cnpm install -g vue-cli

 

进入脚手架要保存的文件夹下（可任意选文件夹）

 

 

下面直接使用vue-cli初始化webpack项目创建项目为vuedemo的web项目（）也可改为其它项目名；

 

vue init webpack vuedemo

回车

接下来一路Y回车如下图

显示如下则代表脚手架搭建成功

搭建好后的脚手架如下图

目录结构介绍

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	包含了几个目录及文件：   assets: 放置一些图片，如logo等。     components: 目录里面放了一个组件文件，可以不用。     App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。     main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

至此脚手架已搭建完成运行一下看效果

cmd进入vuedemo文件夹下

输入npm run dev 或者cnpm run dev（cnpm代表已经安装了淘宝镜像相对会快些）

显示如下图代表安装成功默认端口8080

五、运行结果

打开浏览器访问此地址如下

 

也可在index.html文件中改为hello world就会如下显示