使用npm创建vue项目(超详细)
文章目录一、创建项目环境创建项目前需要配置vue环境,搭建vue环境参考,若已经搭建好则继续运行二、创建Vue项目使用 CMD 进入 创建vue 文件夹举例:在 E盘 VueProject文件夹里创建项目cd E:\VueProjecte:创建项目命令 vue init webpack vuedemo01vue init webpack vuedemo01--vuedemo01为文件名使用 VSC
前言
该文章主要针对小白创建VUE项目文档。
前提:搭建好VUE炫目所需要的环境
使用CMD创建VUE
1. 打开cmd 命令进入到创建VUE项目文件夹下
举例:在 E盘 VueProject文件夹里创建项目
cd E:\VueProject
e:
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配置创建的项目
1. 使用 VSCode 打开 vuedemo01 文件夹
打开 VSCode 软件,在左上角菜单栏上打开文件夹。
2. 进入项目文件夹的终端
打开终端的两种方式:
- 右击需要打开终端的文件夹,选择 打开终端;
- 在菜单栏找到 终端(下方图片②处),选择 新终端。
VScode 右下方会打开个终端窗口,参考下方图片③处:
注意:该文件夹下需要有 package.json 文件。
3. 在终端中安装npm
在刚才打开的终端上配置 npm ,输入下方命令码,出现下方图片显示安装成功。
npm install
4. 查看 项目启动命令
打开 package.json 文件(下方图片①处) ,找到启动项目命令(下方图片②处)。
5. 在终端上输入启动项目命令
在终端(上方图片③处)上输入启动项目命令,我这里命令是 npm run dev。
使用浏览器查看项目
- 按住Ctrl+ 点击链接(1-2 步骤5启动项目后生成的链接) ,浏览器会打开该链接。
至此,项目已经完成创建!!!
更多推荐
所有评论(0)