使用vue-cli搭建工程

使用脚手架搭建vue工程

vue-cli的安装

使用官方的vue脚手架 vue-cli

• webpack

• babel

• …

安装node

node中自带了npm包管理器。

验证安装node

打开终端查看node和npm的版本

node -v
npm -v

配置源地址

默认的情况下npm会从国外的服务器下载需要我们配置国内的镜像

npm config set registry http://registry.npm. taobao.org/

更改好之后查看源地址是否正确

npm config get registry

安装vue-cli

使用下面的命令来安装vue-cli工具

npm install -g @vue/cli # -g 表示的是全局安装

安装好之后使用命令来查看版本

vue --version

vue-cli的使用

选择一个目录防止在工程文件夹的下面

在终端中进入该目录使用命令来进行安装

搭建工程

vue create 工程名

工程名中只能出现英文数字和短横线

选择最后一个自定义vue安装的特性来搭建vue的项目在进入选项的过程当中空格取消选择，第一次安装的过程中只安装babel选项是使用package.json来进行安装。

此时搭建项目完成脚手架自动的进行安装

!

启动项目完成测试

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

npm run server 启动目录

搭建项目的目录

node_modules：存放项目搭建用的模板

public：存放通用页面模板

src：存放源代码的目录

打包

npm run build #对整个项目进行打包，打包之后可以放置在服务器上。