在这里插入图片描述

Cying, How To Create A Vue Project ?

前言

Vue框架有两种使用方式：

1、一种是通过在HTML文件中引入 vue.js 的文件
2、另一种是通过脚手架 vue-Cli 创建一个 vue 工程

今天我要介绍的就是第二种方式
安装三个软件：VsCode，nodejs，cmder，其中 cmder 是用于代替 cmd ，非必须。
点击名字跳转至下载

第一步：准备相应环境

1.webpack [ 在 cmd 或 cmder 中完成 ]

1
npm install webpack -g

在这里插入图片描述

2.vue [ 在 cmd 或 cmder 中完成 ]

1
npm install vue -g

在这里插入图片描述

3.vue-cli [ 在 cmd 或 cmder 中完成 ]

1
npm install vue-cli -g

在这里插入图片描述

4.vetur [ 在 VsCode 中完成 ]

按组合键 Ctrl+Shift+X 打开扩展栏，搜索安装 Vetur

在这里插入图片描述

第二布：创建 Vue 工程文件 [ 此阶段均在 VsCode 中完成 ]

我们要用 Vscode 打开一个文件夹，我们创建的项目工程将存放在这个文件夹下

1.初始化(创建)工程

1
vue init webpack your_prj_name // 工程名不能有大写字母

初始化时会让用户配置一些基本信息，按照自己所需进行选择即可

在这里插入图片描述

当出现下图状态时表示成功

在这里插入图片描述

目录结构如图所示

在这里插入图片描述

注意： 如果出现下图异常

在这里插入图片描述

可以打开 PowerShell 的管理员模式，输入 set-ExecutionPolicy RemoteSigned 选择 Y 来解决

在这里插入图片描述

2.运行工程

明确一点：我们打开的文件夹不是工程文件夹，而是我们初始化时 vue init webpack 后面接的那个文件夹，所以我们首先要打开我们的工程文件夹。在 VsCode 的终端 Terminal 输入

1
cd your_project_name

此时我们成功打开工程文件夹，然后继续在 Terminal 输入

1
npm run dev

在这里插入图片描述

出现下图时运行成功

在这里插入图片描述

此时即可打开链接，访问主页了

在这里插入图片描述

第三步： 安装更多插件

1.jQuery敬请期待

2.bootstrap敬请期待

3.iView敬请期待