用Vue-cli从头搭建项目

Love The Way You Lie 2023-02-13 12:28 17阅读 0赞

> vue-cli ，vue项目脚手架的意思。通过一些命令行工具，帮你配置好项目开发运行，打包全过程，最后只关注你的逻辑代码部分。基于webpack，基本实现零配置。

首先准备一个空文件夹，打开命令行工具进入该空文件夹

### 1. 安装 ###

npm install -g @vue/cli

查看是否安装成功

vue --version

出现版本号说明安装成功

### 2. 命令行创建项目 ###

运行以下命令来创建一个新项目：

vue create hello-cli

会出现如下提示框，可通过上下键选择

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

你可能只看到这个

![20200529141853939.png][]

原因是我在本地新建过项目会保留我的配置。

选择  Manually select features   然后回车（通过自定义项目不使用默认配置）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1][]

注意： 记住到了这步未完成配置之前不要回车、、、

babel 是把最新的代码兼容到当前浏览器都兼容的es5或者3   如果是用es6代码，那一定要选择

TypeScript  基于js的超集，说是另一门语言也不为过  如果想用那是必选的

Progressive Web App (PWA) Support     PWA的支持

Router 即 vue-router  vue官方推荐路由 肯定是要用

Vuex  vue的状态管理工具  要用

CSS Pre-processors   Css预处理语言的使用   使用，我要使用scss, 如果不用可以不选

Linter / Formatter  代码检查和格式化工具   主要为了团队配合开发使用

Unit Testing  单元测试    
  E2E Testing  E2E测试

根据自己的选择 选择就按空格，全部选择完成，回车  继续

下边是我的选择

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2][]

然后提示这个

![20200529143836149.png][]

是否使用css 组件系统  当然选择是

中间一些选择略过，展示下我的选择

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3][]

个人倾向选择保存的时候检查。

![20200529144321850.png][]

选择单独文件生成

然后结束就会自动开始安装

![20200529144433949.png][]

选项越多安装越多。需要一点点时间。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 4][]

证明安装成功

根据提示进入项目

cd hello-cli

运行项目

npm run serve

![20200529150029868.png][]

说明已经跑起来了

访问一下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 5][]

成功。

看一下项目代码目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 6][]

不仅初始化了git仓库，还把项目需要的基本设定完成，非常给力了。

### 3. 可视化方式创建 ###

这个更简单。

找一个文件夹 命令行进入

vue ui

然后就是等一会

![20200529151517242.png][]

正常会自动弹出页面，不不能，则手动输入上边的地址

出现这个页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 7][]

因为我这是已经有创建过的项目。所以点击左上角下拉框箭头，选择vue 项目管理器

然后点击新建，选择一个文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 8][]

然后就是和命令行一样，下一步，下一步，按照你的选择完成项目创建

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529141748209.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200529141853939.png]: https://img-blog.csdnimg.cn/20200529141853939.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200529142205492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200529143645670.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200529143836149.png]: https://img-blog.csdnimg.cn/20200529143836149.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200529144158704.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200529144321850.png]: https://img-blog.csdnimg.cn/20200529144321850.png
[20200529144433949.png]: https://img-blog.csdnimg.cn/20200529144433949.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200529145643865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200529150029868.png]: https://img-blog.csdnimg.cn/20200529150029868.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200529150440858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200529150511600.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200529151517242.png]: https://img-blog.csdnimg.cn/20200529151517242.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200529151504154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200529152020315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70