前言

该文章主要针对小白创建VUE项目文档。
前提:搭建好VUE炫目所需要的环境

使用CMD创建VUE

1. 打开cmd 命令进入到创建VUE项目文件夹下

举例:在 E盘 VueProject文件夹里创建项目

cd E:\VueProject
e:

命令进入创建VUE文件夹下

2. 使用 cmd 命令创建项目,命令如下,举例:创建一个名为 vuedemo01的 VUE项目。

vue init webpack vuedemo01

3. 创建 VUE 项目中,选择一些数据

Project name :项目名称 ( 默认为上方项目名,可自定义)
Project description:项目描述(默认为:A Vue.js Project)
Author:作者
Vue build:构建VUE (这里我选的是 standalone
Install vue-riuter:YES
Use ESLint to lint your code:开始为NO
Set upunit tests:NO
Setup e2e tests with Nightwatch:NO
Should we run npm install for you after the project has been create:这里我选的是最后一个

创建VUE命令

使用VUE配置创建的项目

1. 使用 VSCode 打开 vuedemo01 文件夹

打开 VSCode 软件,在左上角菜单栏上打开文件夹。

2. 进入项目文件夹的终端

打开终端的两种方式:

  • 右击需要打开终端的文件夹,选择 打开终端
  • 在菜单栏找到 终端(下方图片②处),选择 新终端

VScode 右下方会打开个终端窗口,参考下方图片③处:

注意:该文件夹下需要有 package.json 文件。
打开终端窗口
3. 在终端中安装npm

在刚才打开的终端上配置 npm ,输入下方命令码,出现下方图片显示安装成功。

npm install

安装npm

4. 查看 项目启动命令

打开 package.json 文件(下方图片①处) ,找到启动项目命令(下方图片②处)。

查看项目启动命令

5. 在终端上输入启动项目命令

在终端(上方图片③处)上输入启动项目命令,我这里命令是 npm run dev。
在这里插入图片描述

使用浏览器查看项目

  1. 按住Ctrl+ 点击链接(1-2 步骤5启动项目后生成的链接) ,浏览器会打开该链接。
    在这里插入图片描述

至此,项目已经完成创建!!!
开心

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐