一次简单的Vue项目

1 环境准备

最近由于项目需要且人员不足(其实是不想求别人。。。),又希望多学点知识,于是动手自己搭建一个后台管理的项目。

自己不熟悉的主要是前端,因此想从零开始试试前端,选择了据说较为简单的vue,当然对于我来说啥都不懂,因此记录一下相应的搭建过程以及一些比较详细的坑。

相关包和库的准备

  • node 8.11.3
  • npm 5.6.0
  • vue 3.9.3
  • @vue/cli 3.9.3

其中的@vue/cli 使用npm指令安装即可,如果有旧版本,请先使用npm uninstall卸载旧版本

npm install -g @vue/cli

创建一个项目

我们先使用vue指令创建一个项目

vue create keng(你的项目名)

手动相关插件的安装

image

然后就是项目中插件的选择

image

这里选了Babel,Typescript,Router,Vuex,CSS预处理器,语法格式检查工具Linter,由于选择了CSS预处理器和Linter,接下来还要详细的选择标准

image
image

选择每次保存时进行代码校验规则

image

在package.json中保存相关配置

image

没有选项的一路敲回车就好了,然后等待安装。

image

安装成功

image

接下来我们试着运行。

运行项目

按照官方引导就行了:

cd keng
npm run serve
image

访问一下:

image

创建成功!整个环境准备就完成啦!