精华内容
下载资源
问答
  • 这篇文章主要介绍了vue脚手架项目创建步骤详解,文章讲解的很清晰,初学者可以跟着步骤学习下vue脚手架 —> vue.cli快速的创建一个大型的功能齐全的vue项目模板(初始化项目)土味解释:快速的创建一个空的vue项目...

    这篇文章主要介绍了vue脚手架项目创建步骤详解,文章讲解的很清晰,初学者可以跟着步骤学习下

    vue脚手架 —> vue.cli

    快速的创建一个大型的功能齐全的vue项目模板(初始化项目)

    土味解释:快速的创建一个空的vue项目

    安装(全局安装)

    全局安装

    > npm i @vue/cli -g

    创建vue脚手架项目

    > vue create 项目名

    配置选项

    Vue CLI v4.5.11

    ? Please pick a preset: (Use arrow keys)

    > Default ([Vue 2] babel, eslint)

    Default (Vue 3 Preview) ([Vue 3] babel, eslint)

    Manually select features

    按上下选择 ,回车确认,这里选择第三项手动

    选择功能

    Vue CLI v4.5.11

    ? Please pick a preset: Manually select features

    ? Check the features needed for your project: (Press to select, to toggle all, to invert selection)

    >(*) Choose Vue version

    (*) Babel

    ( ) TypeScript

    ( ) Progressive Web App (PWA) Support

    ( ) Router

    ( ) Vuex

    ( ) CSS Pre-processors

    (*) Linter / Formatter

    ( ) Unit Testing

    ( ) E2E Testing

    上下移动光标,空格选择,回车确认,这里选择 1 2 5 6 选项

    选择版本

    ? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex

    ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)

    > 2.x

    3.x (Preview)

    这里选择 2.x

    是否使用历史模式

    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

    这里输入n 回车

    Babel, ESLint等的配置位置

    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

    > In dedicated config files

    In package.json

    这里选择选择第一项 专用配置文件存放

    是否存为预置

    ? Save this as a preset for future projects? (y/N)

    这里选择 n

    创建成功

    Vue CLI v4.5.11

    Creating project in D:\MyStudy\myvue2.

    ⚙️ Installing CLI plugins. This might take a while...

    > core-js@3.9.1 postinstall D:\MyStudy\myvue2\node_modules\core-js

    > node -e "try{require('./postinstall')}catch(e){}"

    > ejs@2.7.4 postinstall D:\MyStudy\myvue2\node_modules\ejs

    > node ./postinstall.js

    added 1208 packages from 928 contributors in 21.836s

    61 packages are looking for funding

    run `npm fund` for details

    🚀 Invoking generators...

    📦 Installing additional dependencies...

    added 5 packages from 1 contributor in 4.671s

    61 packages are looking for funding

    run `npm fund` for details

    ⚓ Running completion hooks...

    📄 Generating README.md...

    🎉 Successfully created project myvue2.

    👉 Get started with the following commands:

    $ cd myvue2

    $ npm run serve

    进入项目 目录

    > cd myvue2

    启动服务

    > npm run serve

    DONE Compiled successfully in 2492ms

    App running at:

    - Local: http://localhost:8080/

    - Network: http://192.168.17.154:8080/

    Note that the development build is not optimized.

    To create a production build, run npm run build.

    到此这篇关于vue脚手架项目创建步骤详解的文章就介绍到这了,更多相关vue脚手架项目创建内容请搜索炫H5(xyhtml5.com)以前的文章或继续浏览下面的相关文章希望大家以后多多支持炫H5(xyhtml5.com)!

    展开全文
  • node.js 服务器启动命令 npm start || yarn start 启动成功的标志 端口号就在 bin/www文件 查看 或更改端口号 127.0.0.1:3000 默认本机的地址 构建好的项目 可以直接用 yarn start 启动 前提是你全局安装了 yarn ...
    node.js 服务器启动命令

    npm start || yarn start

    启动成功的标志

    在这里插入图片描述

    端口号就在 bin/www文件

    查看 或更改端口号
    127.0.0.1:3000 默认本机的地址
    在这里插入图片描述
    构建好的项目 可以直接用 yarn start 启动 前提是你全局安装了 yarn
    在这里插入图片描述

    node.js 服务器 你更改了东西或内容一定要重新启动 部署 和vue不一样 vue会自动刷新部署

    关于 vue 建议看 你用什么构建 就用什么启动
    但是 我试了一下 你用 yarn 构建的项目 npm run serve 启动也是ok的
    同样 npm 构建的 用 yarn serve 也能启动 但是速度要稍微慢一点
    在这里插入图片描述

    展开全文
  • 安装vue在命令行输入npm install -g @vue/cli查看vue版本号 npm vue --version如果vue版本太低,先卸载vue低版本 npm uninstall vue-cli -g第二步 创建vue项目1. 打开要创建路径2-1.vue cli3版本输入vue create ...

    第一步 准备工作

    1.下载安装node.js

    验证是否安装的方法,在命令行输入node -v

    2.安装vue

    在命令行输入npm install -g @vue/cli

    查看vue版本号 npm vue --version

    如果vue版本太低,先卸载vue低版本  npm uninstall vue-cli -g

    第二步  创建vue项目

    1. 打开要创建路径

    daf10f523983745ed916b518708273d3.png

    2-1.vue cli3版本输入vue create test创建名为test的项目

    接下来会问你一系列的问题

    please pick a preset:(use arrow keys)//选择使用什么样的工具,两个选项:

    1.default (babel,eslint)  //默认

    2.manually select features  //自定义,按空格选中

    where do you prefer placing config for babel, postcss,eslint,etc.?(use arrow keys)  //每一个配置都生成一个配置文件还是都生成在package.json中

    1.in dedicated config files  //在专用的配置文件

    2.in package.json  //在package.json

    save this as a preset for future projects?(y/n)  //保存刚刚选择的配置

    1.y

    save preset as:  //保存配置的名字

    2.n

    等待安装……

    安装完成后,输入cd test进入项目文件夹中

    npm run serve启动项目

    2-2.vue cli2版本输入vue init webpack demo //项目是基于webpack的 项目名demo

    接下来会有如下提示

    project name(工程名):回车

    project description(工程介绍):回车

    author:输入作者名

    vue build(是否安装编译器):回车

    install vue-router(是否安装vue路由):回车

    use eslint to lint your code(是否使用eslint检查js代码):n

    set up unit tests(安装单元测试工具):n

    setup e2e tests with nightwatch(是否安装端到端测试工具):n

    should we run npm install for you after the project has been created? (recommended):回车。

    第三步 启动项目

    进入项目目录:cd demo

    安装项目所需要的依赖:npm install

    启动项目:npm run dev

    启动成功,浏览器打开:localhost:8080,即可看到vue项目。

    目录结构

    08eff50c64462e490716eb990c5c239e.png

    package.json

    e1d6cf5f0c110d9423282c3891927a91.png

    1c5da42d7c798689b63cf2e09f3a89f8.png

    展开全文
  • 这两天刚进公司,拉取公司项目下来,安装完依赖,却不能正常跳转。 就像这样, ...一般都是0.0.0.0和localhost是通用的,但是有的机器可能就是不能正常显示,所以,改为localhost以后,重启脚手架。 ...

    这两天刚进公司,拉取公司项目下来,安装完依赖,却不能正常跳转。

    就像这样,

    然后点击就这样,,把我弄懵了, 因为是小白,所以在网上找了一些资料,发现是congig目录下的index.js文件,是和链接地址有冲突的,

    一般都是0.0.0.0和localhost是通用的,但是有的机器可能就是不能正常显示,所以,改为localhost以后,重启脚手架。

    展开全文
  • ![图片说明](https://img-ask.csdn.net/upload/201904/03/1554294241_713537.png)![图片说明]... 这个脚手架是我本地新创建的,还没有上传到github里面。之前创建的都可以正常运行,这个不知道是咋回事。
  • Vue脚手架

    2019-10-22 20:33:28
    1.vue脚手架的基本用法 使用步骤 安装3.x版本的Vue脚手架 使用命令安装脚手架之前,一定要确定你一定安装好了node环境 在命令行中输入node -v 查看是否安装成功 如果在敲击回车之后,出现你的node版本号,即...
  • vue脚手架 npm run dev 启动浏览器 之前vue脚手架npm run dev 就会自动启动浏览器,但是现在的脚手架会出现如下图 看图: 你的应用程序在这里运行:http://localhost:8080 需要手动 Alt+点击 解决办法: ...
  • 使用vue脚手架搭建项目的方法:1、全局安装vue-cli脚手架;2、打开命令提示符,通过cd命令进入项目所在文件夹;3、创建vue-cli工程项目;4、安装依赖;5、启动项目。本教程操作环境:windows10系统、vue2.9版,该...
  • 1、vue 脚手架下载完之后,导入到idea,再进行如下配置 2、 3、
  • vue脚手架启动之后,默认会访问脚手架项目根目录下的index.html首页,如下图: /src/main.js文件 /src/main.js文件的配置,如下图: App.vue组件内容 App.vue组件的内容如下图: src/router/index.js文件内容
  • vue脚手架

    2020-12-08 22:03:36
    vue脚手架 1.安装 1.安装webpack cnpm i wepback -g 2.安装脚手架vue-cli cnpm i vue-cli -g 3.创建项目 vue init webpack demo 4.启动项目 cd demo npm run dev
  • 创建vue脚手架

    2021-09-22 09:56:41
    文章目录前言一、vue脚手架是什么?二、安装1.全局安装@vue?cli2.创建项目3.启动项目备注安装出错1. 有残留安装文件2. 淘宝镜像源的问题3. 管理员问题 前言 利用命令行窗口安装vue脚手架 一、vue脚手架是什么? vue...
  • 传送门: Mac版node安装: Node.js学习_Mac:... 一、安装node; 二、安装vue-cli; 三、创建项目; 四、运行项目; 一、安装node: node.js官网:https://nodejs.org/en/download/ 安装完成后,查看版本号,...
  • vue 脚手架

    2021-09-08 09:43:38
    全局安装脚手架 npm i -g @vue/cli 切换到项目根目录,使用 vue create 项目名称 创建项目 使用 npm run serve | yarn serve 启动项目 如果中途卡顿 使用 npm 淘宝镜像 npm config set registry --> ...
  • 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(不知道后续会不会出事…)可以...
  • vue脚手架搭建

    2020-10-13 11:41:57
    前言 这段时间呆到公司,事情...全局安装下载vue脚手架,需要主要提前安装node,这里的cnpm是淘宝镜像速度比npm比较快 cnpm install -g @vue/cli 终端下载完成后就可以创建我们的脚手架了 二,脚手架创建 vue create
  • Vue脚手架详解

    2020-10-12 02:25:52
    文章目录Vue脚手架快速入门Vue CLI相关组件Vue脚手架版本比较Vue CLI 安装1)指定版本安装2)2.x版本安装3)新版本安装4)新版本桥接 2.x 模板(旧版本)使用 Vue CLI 创建项目1)Vue CLI >= 32)Vue CLI >= 3...
  • vue脚手架安装及vue脚手架创建项目(详细步骤) vue是前端非常火的框架,学会这个框架麻麻再也不用担心我获取不到dom的了 废话不多说,直接开整。 首先,我们要先到nodejs官网下载与电脑适配的nodejs文件到电脑上...
  • Vue 脚手架

    2021-01-22 18:39:10
    什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热...
  • Vue脚手架搭建

    2020-10-28 09:44:50
    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。 A.安装3.x版本的Vue脚手架: npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目: 1).使用命令创建Vue项目 命令:vue create my-project 选择Manually...
  • 昨晚,在教我前端交流群里面的朋友搭建vue开发环境和构建vue项目的时候发现我自己之前能正常构建vue项目的现在却不行了,...差点重新删除node环境和vue脚手架等重装了,但是幸亏我多看了几眼cmd, 发现了貌似是和pac...
  • vue react 脚手架启动服务 vue 在项目根目录创建vueconfig.js文件 module.exports = { devServer:{ before(app){ app.get('/api/list',(req,res)=>{ res.send({ code:200, list })
  • 1.9.vue脚手架使用

    2021-01-27 22:39:14
    安装2.1安装node和npm2.2配置npm服务器地址(运行cmd 再在命令行输入)2.3安装vue脚手架2.4创建vue项目2.5启动图形界面创建2.6安装插件和依赖3.导入vue项目到编辑工具4.整理项目结构5.将之前编写的登录页面与动态...
  • vue脚手架2.0

    2021-01-21 09:51:53
    查阅vue脚手架的版本 vue-V 查阅一下脚手架可支持的模板 vue list 可以查到 template-name 使用脚手架生成项目(以下命令得运行在项目的包裹目录下) vue init webpeck <project-name> :使用webpack作
  • 什么是vue脚手架? 他是一个快速构建 vue 项目的工具,通过他,我们可以将 vue 所需要的文件安装完成。 vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持, 相当于启动了一...
  • VUE脚手架安装

    2020-12-28 19:20:20
    VUE脚手架安装 打开之后切换到指定盘符 *1. 先安装一个能创建脚手架项目的命令行工具: npm i -g @vue/cli 用vue命令,创建一个项目的脚手架代码文件夹 vue create 项目文件夹名* 脚手架文件夹创建成功后: ...
  • vue脚手架安装

    2021-05-22 11:09:08
    vue脚手架可以快速生成vue项目基础的架构 1.安装3.x版本的脚手架: npm install -g @vue/cli 2.基于3.x版本的脚手架创建vue项目 命令:vue create my-proiect 3.配置 勾选特性可以用空格进行勾选 1.选择预设 Default ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,025
精华内容 4,810
关键字:

vue脚手架启动

vue 订阅