这篇文章主要描述,你如何快速创建一个工程化的vue项目。
使用vue-cli,会非常容易及快速的构件一个工程化的Vue项目。我主要依赖的就是vue-cli的官方网站。https://cli.vuejs.org/zh/guide/。
基础部分
通过以下三部我们就可以快速搭建一个vue.js工程项目
第一步,是要安装vue-cli.
安装vue-cli之前,需要node.js.而且要求版本在8.9以上。这里直接进入vue-cli的安装。
安装命令为:
npm install -g @vue/cli
验证是否安装成功的命令:可以直接输入你熟知的命令,或者输入命令验证vue版本,如下
vue --version
如果安装成功,则会显示vue的版本号。比如 3.4.0.
第二步,创建一个工程
创建工程的命令,很简单,就一行:
vue create project-name
然后就会蹦出下面的提示,让你配置你的项目。
当你选择默认设置时,这样你只需要等待系统帮你自动创建好这个项目。
第三部,运行这个项目
正如创建项目成功后提示的两条命令,一般情形,运行项目只需要运行这两条
cd hello-march
npm install //optional,根据是否已经安装了依赖
npm run serve
扩展部分
安装插件:vue-router
vue add router //这里问是否使用history mode,由于目前没有后端配置,选择了no
//安装之后提示有问题,没有安装依赖,根据提示的代码,将router的依赖安装即可
npm install --save vue-router
//安装成功之后,则会提醒更新后的文件夹状态:
✔ Successfully invoked generator for plugin: core:router
The following files have been updated / added:
src/router.js
src/views/About.vue
src/views/Home.vue
package-lock.json
package.json
src/App.vue
src/main.js
一些可能的报错处理
在最开始创建项目时遇到了一些问题,关键是根据报错信息日志,确定自己的报错是什么导致的。