Windows 下 Vue 的安装

时间:2024-03-20 12:19:46

仅介绍 Windows 下 Vue 的安装

    Vue 是一套构建用户界面的渐进式框架,只关注视图层, 采用自底向上增量开发的设计

 

1、安装 node.js 

    进入 node.js 官网,下载并安装 node.js 

    https://nodejs.org/en/download/

    安装步骤略,基本是一路 next 默认即可。附中文文档地址 http://nodejs.cn/

     安装后,打开 cmd ,分别输入 node -v  与 npm -v 来查看是否安装成功

Windows 下 Vue 的安装

 

2、安装 Vue-cli 脚手架

    全局安装配置 npm install -g vue-cli  如果只想在某个项目中使用,可在该目录下执行 npm install vue-cli 即可,如下

Windows 下 Vue 的安装

    注:如果直连网络慢,可将 npm 连接源改为淘宝镜像

    npm install -g cnpm --registry=http://registry.npm.taobao.org 

    安装成功即可使用 cnpm 代替 npm 进行安装,如上一步安装 Vue 脚手架可执行 cnpm install -g vue-cli

 

3、安装 webpack

    执行 npm install -g webpack 

 

4、创建 Vue 项目

    在指定目录,执行 vue init webpack vuedemo (其中的 vuedemo 表示要创建的项目的名称)

    然后需要输入项目的一些信息,如下

Windows 下 Vue 的安装

    其中需要注意的是  Use ESLint to lint your code?  是否使用严格模式,选择 no ,因为严格模式下可能会出现比较多的警告和错误提示问题

 

5、项目目录结构

    项目初始化成功后,目录结构如下

Windows 下 Vue 的安装

    其中 src 既是项目源码放置路径,components 是公用组件模块目录,assets 是资源路径,router 是路由,main.js 是项目入口 js 文件。搭建的页面 Vue 文件可放置在 components 下,也可另外新建一个目录存放,如 page

Windows 下 Vue 的安装

    至此项目创建完成

 

6、运行项目

    使用命令进入到 Vue 项目根目录,执行 vue run dev ,即可启动项目,然后可在浏览器中输入 localhost:8080 查看项目

Windows 下 Vue 的安装

    浏览器打开效果如下,该页面既是 src 目录下的 App.vue 

Windows 下 Vue 的安装