傻瓜式创建vue项目

首先,安装vue-cli脚手架构建工具

npm install -g @vue/cli

检验是否安装成功,获取到版本号即为安装成功vue -V

傻瓜式创建vue项目
或者

cnpm install -g @vue/cli

这是由于npm网站服务器位于国外,所以经常下载缓慢或出现异常,所以我们乐于分享的淘宝团队干了这事来自官网:“这是一个完整npmjs.org镜像,你可以用此代替官方版本(只读),同步频率目前为10分钟一次以保证尽量与官方服务同步“。

安装:
命令提示符执行

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

安装完后最好查看其版本cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误

然后就可以开始创建你的项目

在当前文件夹下,按住Shift加鼠标右键,选择打开Powershell窗口
傻瓜式创建vue项目
或者在当前文件夹的地址栏中输入cmd
傻瓜式创建vue项目
进入命令指示符界面
傻瓜式创建vue项目
输入 vue create vue2020(vue2020是自定义项目名)
点击回车
这里我们选择自定义设置:(上下键选择,回车键确定)
傻瓜式创建vue项目
如下图选择相应功能(上下键选择,空格键选中),然后点击回车
傻瓜式创建vue项目
选择是否使用路由 history router,其实直白来说就是是否路径带 # 号,我选的是y,然后点击回车
傻瓜式创建vue项目
node-sass是自动编译实时的,dart-sass需要保存后才会生效(含最新特性),建议选择dart-sass,然后点击回车
傻瓜式创建vue项目
ESlint格式化标准,选择ESLint + Standard config标准配置,然后点击回车
傻瓜式创建vue项目
两个都选(上下键选择,空格键选中),然后点击回车
傻瓜式创建vue项目
下面就是如何存放配置了,In dedicated config files 存放到独立文件中(有多个配置文件),In package.json 存放到 package.json 中
看个人喜好选择,然后点击回车
傻瓜式创建vue项目
最后就是是否保存本次的配置了,N 不记录,如果选择 Y 需要输入保存名字

傻瓜式创建vue项目
等待安装成功
傻瓜式创建vue项目出现以下界面表示安装成功
傻瓜式创建vue项目
输入cd vue2020进入vue2020文件夹
傻瓜式创建vue项目
再次输入npm run serve启动项目
傻瓜式创建vue项目
打开网页,在地址栏中输入localhost:8080
傻瓜式创建vue项目

题外话:建议将你所创建的项目,进行压缩保存,放到容易找到的地方,下次可以直接解压使用

以上便是vue项目创建的全部过程,祝贺你,你成功了