基于Vue-cli 快速搭建项目

news/2024/7/5 5:04:39

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

一、准备工作
在使用 vue-cli 时,首先需要安装 nodejs , npm ,其次需全局安装 vue 和 vue-cli

1、nodejs 和 npm

2、npm install -g vue

3、npm install -g vue-cli

二、vue-cli 快速搭建项目
安装完成后, 同时在 C:UsersAndminsterAppDataRoamingnpm 目录下为会生成几个文件 。

三、配置环境变量
Vue 不是内部或外部命令问题解决

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

可以全局搜索, vue.cmd
图片描述

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

电脑——属性——高级系统设置
图片描述

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

使用命令创建项目

vue init webpack test

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

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

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

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

接下来会让用户选择

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

4 、 Standard (https://github.com/feross/sta... 标准

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

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

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

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

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

9 、 完成

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

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


http://www.niftyadmin.cn/n/4635630.html

相关文章

C#修改app.config配置文件信息

//更新app.config的函数private void UpdateConfig(string Xvalue){ XmlDocument doc new XmlDocument(); doc.Load(Application.ExecutablePath".config"); XmlNode node doc.SelectSingleNode("//add[keyServerName]…

c#.net多线程编程教学(2):Thread类

这章将向大家介绍.NET中的线程API,怎么样用C#创建线程,启动和停止线程,设置优先级和状态.在.NET中编写的程序将被自动的分配一个线程.让我们来看看用C#编程语言创建线程并且继续学习线程的知识。我们都知道.NET的运行时环境的主线程由Main ()方法来启动应用程序,而且…

c#.net多线程编程教学(3):线程同步

随着对多线程学习的深入,你可能觉得需要了解一些有关线程共享资源的问题. .NET framework提供了很多的类和数据类型来控制对共享资源的访问。考虑一种我们经常遇到的情况:有一些全局变量和共享的类变量,我们需要从不同的线程来更新它们,可以通…

如何:对制造者线程和使用者线程进行同步(C# 编程指南)

下面的示例演示使用 lock 关键字以及 AutoResetEvent 和 ManualResetEvent 类对主线程和两个辅助线程进行线程同步。有关更多信息,请参见 lock 语句(C# 参考)。 该示例创建两个辅助线程。一个线程生成元素并将它们存储在非线程安全的泛型队列…

什么是封闭式基金?如何买卖?

封闭式基金属于信托基金,是指基金规模在发行前已确定、在发行完毕后的规定期限内固定不变并在证券市场上交易的投资基金。 由于封闭式基金在证券交易所的交易采取竞价的方式,因此交易价格受到市场供求关系的影响而并不必然反映基金的净资产值&#xff0c…

作业 20181030-3互评Alpha版本

此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2323 组名:可以低头,但没必要 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 刘欣 段晓睿 一、基于NABCD评论作品,及改进建…

f5售后查询

登录: https://secure.f5.com/validate/validate.jsp http://boochem.blog.51cto.com/628505/633907转载于:https://www.cnblogs.com/xinghen1216/p/9908264.html

A股

a股读音:A gǔA股A股的正式名称是人民币普通股票。它是由我国境内的公司发行,供境内机构、组织或个人(不含台、港、澳投资者)以人民币认购和交易的普通股股票。我国上市公司的股票有A股、B股、H股、N股和S股等的区分。这一区分主要依据股票的…