Vue项目搭建

Posted 2022-08-29 maggieq8324

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基础项目搭建完毕。