搭建vue项目详细说明

第一步:软件下载

node下载:http://nodejs.cn/download/,根据需要选择相应版本(本文以win-64位为例)

vscode下载:https://code.visualstudio.com/(本文以VSCodeUserSetup-x64-1.41.1为例)

搭建vue项目详细说明_第1张图片

第二步:安装软件

vscode软件安装一路下一步即可(注意:安装路径根据自己喜好调整,建议不要有中文)

node软件安装一路下一步即可(注意:安装路径根据自己喜好调整,建议不要有中文),node自带npm安装软件,不需另外再行安装

第三步:环境配置


搭建vue项目详细说明_第2张图片

检验效果:cmd命令窗口,输入  node -v 查看版本,正常会打印出当前node的版本号,npm -v会打印出当前npm版本

搭建vue项目详细说明_第3张图片
di

第四步:使用淘宝映像

命令窗口输入:npm install -g cnpm --registry=https://registry.npm.taobao.org


搭建vue项目详细说明_第4张图片

命令窗口输入:cnpm install --global vue-cli 


搭建vue项目详细说明_第5张图片

验证:是否成功,命令窗口输入 vue回车  或者  vue -V回车


搭建vue项目详细说明_第6张图片

第四步:创建项目

命令窗口cd 到你想创建项目路径

输入:vue init webpack projectname  注意:projectname为你的项目名称,不要有大写字母


搭建vue项目详细说明_第7张图片

说明:project name 即项目名称;第二个直接回车,第三个作者 可输可不输;第四个 回车;第五个 y;第六个n,第七个n,第八个n,最后一个回车。


搭建vue项目详细说明_第8张图片

第五步:输入:cnpm install


搭建vue项目详细说明_第9张图片

第六步:启动,输入:npm run dev


搭建vue项目详细说明_第10张图片


搭建vue项目详细说明_第11张图片

浏览器:http://localhost:8080即可


第八步:开发工具设置


搭建vue项目详细说明_第12张图片

安装vetur插件,

设置中文,alt+shift+p

在输入框输入configure language



搭建vue项目详细说明_第13张图片


搭建vue项目详细说明_第14张图片


搭建vue项目详细说明_第15张图片


搭建vue项目详细说明_第16张图片

你可能感兴趣的:(搭建vue项目详细说明)