精华内容
下载资源
问答
  • 通过 VUE 脚手架创建项目 通过 VUE 脚手架创建项目


    通过 VUE 脚手架创建项目

    通过 VUE 脚手架创建项目

    1. 通过命令行的方式创建项目:vue init webpack + 项目名称
      在这里插入图片描述

    2. 通过UI 界面的方式创建项目
      使用命令vue ui 即可开启可视化创建项目工具:
      在这里插入图片描述
      在这里插入图片描述
      step1:
      在这里插入图片描述
      step2:
      在这里插入图片描述
      在这里插入图片描述
      step3: 进入到此界面
      在这里插入图片描述
      输入项目名称,下一步
      在这里插入图片描述

    step4:
    手动配置项目:
    在这里插入图片描述
    step5: 进入到功能面板,选择需要安装的功能
    在这里插入图片描述
    在这里插入图片描述
    step6:
    在这里插入图片描述
    是否设置预设?
    在这里插入图片描述
    在这里插入图片描述
    项目创建完成:
    在这里插入图片描述


    运行项目

    step1: 选择任务 -> 选择serve
    在这里插入图片描述
    step2:选择运行 - > 等待编译成功,启动app
    在这里插入图片描述

    组件化


    组件的引入方式

    Mode 1

    在这里插入图片描述

    展开全文
  • vue脚手架创建项目

    千次阅读 2019-12-08 11:24:55
    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目以及更改对相应的webpack配置 安装vue 全局安装 npm install vue -g 局部安装 npm install vue 我这里采用的是全局安装 安装vue-...

    什么是脚手架(vue-cli)

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目以及更改对相应的webpack配置

    通过脚手架创建项目

    通过脚手架创建项目大致分为两类:一类是通过3.x版本的脚手架创建项目,一类是通过2.x版本的脚手架创建项目

    无论是通过 3.x 还是 2.x 版本的脚手架创建项目都需要安装脚手架

    脚手架的安装

    首先,先说明一下,如果我们安装的是脚手架 3.x 版本,那么我们也可以使用 3.x 的脚手架通过 2.x 的方式来创建项目,但是如果安装的是 2.x 版本的脚手架是不能通过 3.x 的方式创建项目的

    我这里安装的是 3.x版本的脚手架并且是全局安装

    1.安装3.x版本的脚手架

    npm install @vue/cli -g
    

    2.安装 2.x 版本的脚手架

    npm install vue-cli -g
    

    3.查看脚手架的版本

    vue -V
    

    这里给出的安装脚手架命令都是全局安装,如果不想全局安装的话就把每行命令后的-g去掉即可

    全局安装脚手架之后,以后如果再创建项目的话,就不需要再重新安装脚手架了

    3.x版本以上脚手架创建项目

    通过脚手架 3.x 版本 创建项目有两种方式,一种是在命令框中创建项目,一种是在图形化界面创建项目

    命令框创建项目

    1)输入创建命令

    vue create 项目名称
    

    2)选择 Manually select features点击回车
    选择特性以创建项目,简单点来说自己的项目需要什么特性(组件、Vuex等),就可以选择哪一个来进行创建

    3)选择特性
    按空格选择,前面有 * 号代表已经选择
    我这里只选择了 router,选择完成后点击回车

    4)是否选用历史模式的路由:n

    5) ESLint 选择
    选择ESLint + Standard config

    6) 何时进行 ESLint 语法校验
    选择 Lint on save

    7)babel,postcss等配置文件如何放置
    选择In dedicated config files(单独使用文件进行配置)

    8)是否保存为模板
    自己根据自己的情况决定,我选择 n
    在这里插入图片描述

    9)使用哪个工具安装包
    选择 npm进行安装

    安装完成之后会出现如下界面
    在这里插入图片描述
    按照命令执行即可,之后会出现下面两个 url 随便哪一个在浏览器窗口打开即可
    在这里插入图片描述

    使用 ui 界面创建项目

    1)输入命令

    vue ui
    

    2)进到如下界面创建项目
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    点击安装之后静待安装,安装完成之后执行如下操作
    在这里插入图片描述

    3.x 版本基于2.x的旧模板创建项目

    在前面我们已经安装了 3.x 版本,那么你就不能使用 vue-cli2.x 版本

    因为 3.x 和旧版使用了相同的vue命令,所以 2.x 被覆盖了,所以就不能使用2.x版本中的有些命令

    但是如果还然想使用 2.x 的vue init功能,那么此时就需要全局安装一个桥接工具

    npm install -g @vue/cli-init
    

    安装完这个我们就可以创建项目了

    1)初始化(创建)项目

    vue init webpack 项目名称
    

    此时会依次出现下面的内容

    项目名称
    ? Project name (vue)
    项目描述
    ? Project description (A Vue.js project)
    源码解析准备
    ? Vue build
      - Runtime+Compiler
      - Runtime Only
    是否安装路由
    ? Install vue-router?
    检验你的代码是否符合规范
    ? Use ESLint to lint your code?
    项目单元测试
    ? Set up unit tests (Y/n)
    自动化测试
    ? Setup e2e tests with Nightwatch?
    使用npm还是yarn
    ? Should we run `npm install` for you after the project has been created? (recommended)
     - Yes, use NPM
     - Yes, use Yarn 
     - No, I will handle that myself
    

    我的选择
    在这里插入图片描述
    点击回车等待安装成功,安装成功之后根据提示执行命令,执行完,便可以在浏览器窗口输入给定的 url 查看效果

    两个版本项目目录的对比

    在这里插入图片描述
    通过对比会发现,3.x 少了许多的许多的配置文件的目录(build、config等),因为 3.x 可以在根目录下新建一个vue.config.js文件,所有的配置都会在这个文件里直接配置

    vue.config.js是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写

    详见 官网是如何描述的

    展开全文
  • 安装vue脚手架 关闭cmd重新打开,执行以下命令,验证vue安装是否成功 vue vue -V 验证vue安装成功 或者如下: 使用webpack打包工具,启动vue项目 创建一个工作空间用于保存项目,比如本文使用D:\workspace\vs_...

    写在前头:每次新建vue项目时,都要搭建一次脚手架
    使用vue-cli脚手架搭建vue开发环境
    安装全局vue-cli脚手架,用于帮助搭建vue框架的模板项目。
    打开cmd,执行以下指令。

     cnpm install vue-cli -g 
    

    安装vue脚手架
    在这里插入图片描述

    关闭cmd重新打开,执行以下命令,验证vue安装是否成功

    vue
    vue -V
    

    在这里插入图片描述在这里插入图片描述

    验证vue安装成功

    或者如下:

    1. 使用webpack打包工具,启动vue项目
      创建一个工作空间用于保存项目,比如本文使用D:\workspace\vs_workspace
      打开cmd,通过cd指令进入该目录
      在这里插入图片描述

    进入工作目录
    输入下面指令,创建hellovue项目

    vue init webpack hellovue
    

    一路回车,除了vue-router选择yes,其余一律no

    创建hellovue项目
    在这里插入图片描述

    vue init webpack hellovue
    

    在这里插入图片描述

    一路确认后得到下图

    后续操作指令
    按照提示,执行后续cmd指令,将提示指令中的所有npm指令全部替换为cnpm指令
    在这里插入图片描述

    指令执行过程1
    在这里插入图片描述

    中间部分内容略
    在这里插入图片描述

    后续操作指令2
    不要关闭cmd窗口,根据指令提示,访问网址:http://localhost:8080,可以看到vue的网页
    在这里插入图片描述

    vue启动成功
    6. vscode开发工具安装
    在vscode官网下载页面,下载vscode的安装程序,建议选择稳定版
    https://code.visualstudio.com/

    下载vscode安装程序
    在这里插入图片描述

    安装过程可以无脑下一步,也可以根据实际情况调整安装位置和设置是否创建快捷方式

    1. vscode集成npm开发vue项目
      启动vscode,点击“open folder”,
      打开文件夹
      在这里插入图片描述

    选择刚才利用webpack打包生成的vue项目所在目录D:\workspace\vs_workspace\hellovue

    vue工程内容
    通过快捷方式ctrl + `或者View -> Terminal打开控制台
    在这里插入图片描述

    打开Terminal控制台
    在这里插入图片描述

    可以通过在Terminal控制台输入指令控制vue项目启动

    在这里插入图片描述

    启动vue项目
    如果出现如下错误:
    在这里插入图片描述

    则因为管理员权限问题。
    首先:以管理员身份运行vscode:
    其次:使用Win+R命令,输入powershell,然后确定,进入终端需要执行 Start-Process powershell -Verb runAs 切换到管理员命令窗口,执行 set-ExecutionPolicy RemoteSigned ,执行策略选择 Y。

    在这里插入图片描述

    在这里插入图片描述

    再回到vs
    在这里插入图片描述

    展开全文
  • vue脚手架安装及vue脚手架创建项目(详细步骤) vue是前端非常火的框架,学会这个框架麻麻再也不用担心我获取不到dom的了 废话不多说,直接开整。 首先,我们要先到nodejs官网下载与电脑适配的nodejs文件到电脑上...

    vue脚手架安装及vue脚手架创建项目(详细步骤)

    vue是前端非常火的框架,学会这个框架麻麻再也不用担心我获取不到dom了

    废话不多说,直接开整。

    首先,我们要先到nodejs官网下载与电脑适配的nodejs文件到电脑上并安装

    下载node安装包之后,直接傻瓜式安装就行
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    安装好nodejs之后,在电脑创建一个新文件夹,并在里面打开cmd窗口
    在这里插入图片描述

    cmd窗口打开之后,输入npm install nrm -g命令回车,全局安装nrm工具
    在这里插入图片描述

    显示这个提示,就说明nrm安装成功了
    在这里插入图片描述

    接下来继续输入nrm use taobao 切换使用淘宝源下载插件,这一步不是必要的,但决定了后面的下载速度
    在这里插入图片描述
    显示下面提示文本就切换成功了
    在这里插入图片描述
    现在准备工作就结束了,下面输入npm install @vue/cli -g安装vue脚手架,接下来的过程会很漫长,耐心等待
    在这里插入图片描述
    显示这个文本,就说明vue脚手架也OK了
    在这里插入图片描述
    下面是最后一步,也是最重要的一步,在命令行输入vue create my-project创建一个新项目(项目名称不能出现大写字母)
    在这里插入图片描述
    项目创建好之后会出现这个窗口,我们选择Manually select features 手动选择配置 (用上下箭头移动,回车键选择,后续才做也是如此)
    在这里插入图片描述

    我们选择Babel,Router,Veux,CSS Pre-processors,这四个选项(用上下箭头移动,空格键选中或取消),选择好之后,回车下一步
    在这里插入图片描述

    输入n 选择hash模式作为路由切换
    在这里插入图片描述

    选择Less css预处理器
    在这里插入图片描述

    选择把配置写在package.json文件夹内
    在这里插入图片描述

    选择是否保存以上配置到本地(根据个人需求选择) 接下来是漫长的安装过程
    在这里插入图片描述

    如果出现以下提示,那么恭喜你,你的项目已经搭建成功了
    在这里插入图片描述

    下面输入cd my-project 切换到项目目录,然后执行npm run serve 启动项目
    弹出以下窗口信息,复制网址到浏览器就可以看到vue项目界面了(注意:此窗口不能关闭)
    在这里插入图片描述
    这就是默认的项目界面
    在这里插入图片描述

    展开全文
  • Vue脚手架创建项目流程 图形化创建 在创建文件的文件夹打开cmd, 按住shift右键打开黑窗口,或者直接在文件夹上面路径上面输入cmd 输入vue ui 会自己在浏览器打开 点击创建项目 项目文件夹名 ele_spa 包管理器 ...
  • 使用vue脚手架创建项目

    千次阅读 2019-07-30 22:37:27
    (1)在创建项目之前需要在电脑上提前安装好两样东西,分别是node.js,官网下载地址分别是https://nodejs.org/zh-cn/,安装完成后,使用命令“npm -v”,如果可以显示版本号,证明安装成功。 (2)使用 Vue.js 的架...
  • vue脚手架创建项目的过程和运行项目的方式 什么是脚手架(Vue CLI) Vue CLI是一个基于 Vue.js 进行快速开发的完整系统 它可以帮我们快速的生成项目的整体结构,我们不必花时间纠结配置的问题 1.下载安装脚手架 // ...
  • Vue脚手架创建Vue项目

    2021-04-06 12:19:24
    1. 什么是Vue脚手架 中文官方网址 安装3.x版本的Vue脚手架npm install -g @vue/cli,在d盘的web_study下面的vue文件夹下面安装 我这里安装了目前的最新版本@vue/cli 4.5.12(不知道后续会不会出事…)可以...
  • 1.首先win+R,输入cmd,在命令行中输入命令 vue ui 2.启动ui面板 3.在创建面板中选择项目存放路径,点击创建项目 4.首先填写项目相关信息,初始化git仓库是方便后期开发向git仓库提交代码 5.选择配置,...
  • Vue脚手架4.1 使用配置4.2 vue ui创建项目4.3 创建项目文件结构4.4 脚手架自定义配置 - 打包自启动,端口号更改4.4.1 方式1 - 不推荐,该文件尽量专门用来管理包版本4.4.2 方式2 - 推荐 1. Vue单文件组件 解决下面...
  • 1.全局安装webpack @vue/cli-init g 表示全局安装 npm install webpack -g npm install -g @vue/cli-init 2.初始化vue项目 ...表示vue脚手架使用webpack模板初始化一个appname项目 3.启动vue项目 ...
  • VUE-CLI是VUE官方推出的用来构建VUE项目脚手架配置工具 基于vue.js,用于自动生成vue.js+webpack的项目模板 它有以下三个组件 CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue ...
  • 第一种比较简单,就是将vue create命令改为winpty vue.cmd create命令
  • 自用的vue开发笔记
  • 1.终端中输入命令,打开UI界面 vue ui
  • 安装vue脚手架 npm install -g @vue/cli 使用脚手架创建项目 vue create my-project
  • 验证node版本和npm版本,如果没安装没安装,请查看安装教程 ...安装vue-cli,首选第一个,因为快,也可能会出错,之前就遇到过,出错时就只能选第二个了 cnpm install -g @vue/cli 或 npm install -g @vue/cli 搭建
  • vue脚手架创建项目时,报错 Unsupported URL Type "npm:": npm:vue-loader@^16.0.0-beta.7 场景:使用脚手架创建项目时,出错 错误信息: npm ERR! code EUNSUPPORTEDPROTOCOL npm ERR! Unsupported URL Type ...
  • 1.安装脚手架vue cli 安装的前提是已经安装了node.js npm install -g @vue/cli 在命令行输入本命令全局...脚手架2创建项目 vue init webpack 项目名 脚手架3创建项目 vue create 项目名 之后前面一路回车,后面一路
  • vue 脚手架创建步骤

    2017-04-19 21:46:15
    vue脚手架创建步骤
  • Vue 脚手架 安装 可以使用下列任一命令安装这个新的包: npm install -g @vue/cli # OR yarn global add @vue/cli ...用Vue脚手架创建项目 1、运行以下命令来创建一个新项目: vue create h
  • 使用vue脚手架创建项目和搭建本地环境,连接服务端变得很容易,那么怎么实现呢? 首先在桌面输入win+R并输入cmd打开控制台下载安装vue-cli 输入代码npm install @vue/cli -g然后按回车开始安装,(-g代表全局安装)...
  • Vue脚手架创建

    2021-10-15 16:22:15
    2 切换到想要创建项目的目录,然后执行下面的命令 vue create xxxx(projectName) 3 启动项目 npm run serve 如果npm下载过慢,可以配置淘宝镜像: npm config set registry ...
  • 在目标文件执行cmd命令,vue init webpack vuedemo,失败: 换一个命令,使用离线的webpack包:vue init webpack vuedemo --offline F:\vue\vue01>vue init webpack vuedemo --offline > Use cached template at ~...
  • 使用脚手架创建项目 安装脚手架 [VueCLI官网] (https://cli.vuejs.org/zh/guide/installation.html) 全局安装 npm install -g @vue/cli 项目创建,在项目目录运行cmd,输入命令 projectname为项目名称,项目名称...
  • Vue脚手架安装以及用脚手架创建第一个Vue项目前言一、Node.js的安装二、nrm工具以及Vue脚手架的安装1,创建一个新的文件夹用于储存你的Vue项目2,然后在文件夹目录下,...利用Vue脚手架创建第一个Vue项目1,输入命令`vu
  • 检查环境 node -v 安装vue-cli npm install vue-cli 创建项目 vue init webpack 项目名称 命令如上图。
  • 所谓脚手架就是指用来快速生成项目结构的工具,Vue脚手架工具就是一个快速生成Vue项目结构的命令行工具,可以极大的方便我们快速创建项目。目前最新的脚手架工具版本是4.x 安装脚手架工具 # 安装vue cli 4.x npm i -...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,679
精华内容 4,671
关键字:

vue脚手架创建项目命令

vue 订阅