创建第一个VUE项目

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

首先,搭建Node环境,安装nodeJS。这里我下载的是nodeJS 8.11.1版本(自带npm5.6.0,npm用于安装插件)>>>传送门:https://nodejs.org/dist/v8.11.1/

安装完成后,进入Node的命令行终端。由于npm安装插件是从国外的服务器下载,受网络影响大,经常会出现下载缓慢或异常问题,因此更换国内的淘宝npm镜像--cnpm。
在Node命令行下输入安装cnpm命令

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

之后在网络上看到教程使用npm安装插件的,直接改用cnpm就可以了。

npm简介:npm全程是Node package manager,即Node的包管理器,用于Nodejs的插件管理(包括安装、卸载、管理依赖等)。
类似VSCode的package manager(左侧栏扩展),从应用市场上安装插件到自己的电脑。

clipboard.png

顺带提一下VS CODE中提高效率的vue插件安装:
Auto Close Tag 自动补全html标签
Auto Rename Tag——修改HTML标签时,自动修改匹配的标签
AutoFileName——自动补全文件路径提示
Babel ES6/ES7——ES6,ES7语法加亮检查插件
Chinese (Simplified) Language Pack for Visual Studio Code——为 VS Code 提供简体中文界面
ESLint——代码检查插件
vetur——Vue语法高亮
vscode-icons——为每个文件类型增加一个小图标,使文件目录更直观
Vue 2 Snippets——Vue2 片段补全工具
VueHelper——Vue2代码段(包括Vue2 api、vue-router2、vuex2)

————————————————————————————————————
NodeJS安装完成后,就可以开始创建一个实例了。
本人的项目文件夹路径在D:/下,进入Node cmd后要转路径到项目文件夹下。

1.安装vue-cli,-g代表全局安装,不加-g表示本项目安装,这里是本项目安装。
vue-cli简介:Vue-cli是Vue的脚手架工具,就像建筑工人在高处作业时一般都要搭一个脚手架,方便工作,在这里vue-cli为我们生成了目录结构。

cnpm install -g vue-cli

图片描述

2.初始化项目
vue init <构建工具> <项目名>

vue init webpack vue-test

图片描述

等待自动构建完成后,使用npm run dev打开新建的vue项目

npm run dev

图片描述
图片描述

在浏览中地址栏中输入 [ http://localhost:8080 ] 便可以看到新建的VUE项目了!
文件目录及对应说明:
图片描述

clipboard.png

好了!第一个VUE项目就构建完成,可以在浏览器中看到了!~

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看