基于Vue-cli 快速搭建项目

简介: Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。一、准备工作  在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装vue和vue-cli  1、nodejs和npm安装方法详见https://www.

Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。

一、准备工作

  在使用vue-cli时,首先需要安装nodejsnpm,其次需全局安装vuevue-cli

  1、nodejsnpm安装方法详见https://www.cnblogs.com/le220/p/8670349.html

  2、npm install -g vue

  3、npm install -g vue-cli

二、vue-cli快速搭建项目

  安装完成后,同时在C:\Users\Andminster\AppData\Roaming\npm目录下为会生成几个文件

三、配置环境变量

  Vue不是内部或外部命令问题解决

  表示系统没有找到vue.cmd的地址,需要将vue.cmd的地址添加到系统环境变量的path中。

  可以全局搜索,vue.cmd

 

右键选择“打开文件所在目录”,将该目录添加至系统环境变量path中:

电脑——属性——高级系统设置

 

 

四、安装完成后,创建自己的工作空间,在cmd切换至刚刚创建好的工作空间,如果已经有工作空间,直接切换到工作空间即可。

  使用命令创建项目

  vue init webpack test

  test是项目名称,这个名字自己随便取。

  命令输入后,会进入安装阶段,需要用户输入一些信息

  1Project name (vuetest)            项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)。

  2Project description (A Vue.js project)  项目描述,也可直接点击回车,使用默认名字

接下来会让用户选择

  3接下来也是选择题Pick an ESLint preset (Use arrow keys)            选择一个ESLint预设,编写vue项目时的代码风格,因为我选择了使用ESLint

  4Standard (https://github.com/feross/standard)    标准

  5AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法

  6none (configure it yourself)    这个不用说,自己定义风格

  具体选择哪个因人而异吧  ,我选择标准风格

  7Setup unit tests with Karma + Mocha? (Y/n)  是否安装单元测试,我选择安装

  8Setup e2e tests with Nightwatch(Y/n)?     是否安装e2e测试 ,我选择安装

  9完成

五、运行项目

在项目文件夹下执行npm install(安装依赖包),npm run dev(运行项目)。

在运行项目中如果遇到端口被占用,找到bulid文件夹下的webpack-dev-server.js修改port即可。

相关文章
|
3天前
|
JavaScript
如何创建一个Vue项目(手把手教你)
这篇文章是一篇手把手教读者如何创建Vue项目的教程,包括使用管理员身份打开命令行窗口、找到存放项目的位置、通过vue-cli初始化项目、填写项目信息、进入项目目录、启动项目等步骤,并提供了一些常见第三方库的引入方法。
如何创建一个Vue项目(手把手教你)
|
4天前
|
JavaScript 前端开发
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
本文介绍了在Vue2或Vue3项目中如何使用Isotope(同位素)布局库来创建动态的网格布局,并提供了详细的代码实现和效果展示,包括过滤和排序功能。
10 0
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
|
4天前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
30 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
10天前
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
4天前
|
JavaScript UED
如何在Vue3项目中使用防抖节流技巧
在Vue 3项目中使用防抖和节流技巧以优化组件性能,包括使用`lodash`库和自定义实现这两种方法。
7 0
如何在Vue3项目中使用防抖节流技巧
|
4天前
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
本文介绍了在Vue3 + ElementPlus项目中如何使用`el-autocomplete`控件实现自动补全输入功能,并探讨了不同版本ElementPlus中`clearable`属性的兼容性问题。
16 0
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
|
4天前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
12 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
|
4天前
|
JavaScript
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
这篇文章介绍了Vue中router路由和router-link的使用方式,包括router配置、router-link在模板中的使用,以及实现的导航菜单和页面路由效果。
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
|
4天前
|
JavaScript IDE 开发工具
在vue项目中禁用eslint
这篇文章提供了多种方法来禁用Vue项目中的ESLint校验,包括修改配置文件和IDE设置,以适应不同版本的Vue项目和开发者的需求。
在vue项目中禁用eslint
|
9天前
|
JavaScript 前端开发 安全
【Vue3 + Vite】6个非常强大的后台管理项目!开源且免费!
【Vue3 + Vite】6个非常强大的后台管理项目!开源且免费!