创建一个基于webpack模板的新项目

D:\Git
$ vue -V
2.9. D:\Git
$ vue init webpack my-project ? Project name my-project
? Project description A Vue.js project
? Author hongda <hongda159505@qq.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "my-project". # Installing project dependencies ...
# ======================== npm WARN deprecated socks@1.1.: If using .x branch, please upgrade to at least 2.1. to avoid a serious bug with socket data flow and an import issue introduced in 2.1. > chromedriver@2.38. install D:\Git\my-project\node_modules\chromedriver
> node install.js Downloading https://chromedriver.storage.googleapis.com/2.38/chromedriver_win32.zip
Saving to C:\Users\qhong\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
Received 782K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3299K total.
Extracting zip contents
Copying to target path D:\Git\my-project\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at D:\Git\my-project\node_modules\chromedriver\lib\chromedriver\chromedriver.exe > uglifyjs-webpack-plugin@0.4. postinstall D:\Git\my-project\node_modules\webpack\node_modules\uglifyjs-webpack-plugin > node lib/post_install.js npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2. (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) added packages in .032s Running eslint --fix to comply with chosen preset rules...
# ======================== > my-project@1.0. lint D:\Git\my-project
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix" # Project initialization finished!
# ======================== To get started: cd my-project
npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack

需要注意的是项目的名称不能大写,不然会报错。

Project name (my-project) # 项目名称(我的项目)

Project description (A Vue.js project) # 项目描述一个Vue.js 项目

Author 作者(你的名字)

Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])

Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)

Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)

Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)

当然这些都看你自己个人的情况,我这里是全选了是。

各目录用途:

安装项目所需要的依赖

npm install

运行:

$ npm run dev

> my-project@1.0. dev D:\Git\my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js % emitting DONE Compiled successfully in 4030ms :: I Your application is running here: http://localhost:8080

提示已运行在8080端口

修改运行时自动打开浏览器:

目录中config下的index.js修改,将autoOpenBrowser:false 改为true

意思是是否默认打开浏览器改为是。就好了

https://segmentfault.com/a/1190000011275993

https://www.jianshu.com/p/1626b8643676

Vue脚手架创建项目的更多相关文章

  1. 小白6步搞定vue脚手架创建项目

    1.安装node及npm node -v (测试node是否安装成功)npm -v(测试npm是否安装成功) 2.安装cnpm npm install -g cnpm --registry=http: ...

  2. Vue脚手架创建项目出现 (Failed to download repo vuejs-templates/webpack: Response code 404)

    搭建好(脚手架2.X版本)环境像往常一样使用vue init webpack xxxx 创建项目可以是没多久就开始报错了 报错结果就是:vue-cli · Failed to download rep ...

  3. vue脚手架创建项目后使用路由报错Object(...) is not a function问题

    在这之前我做过的vue项目没有这种问题,今天突然出现这个问题,也检查了很久的代码,最后解决我也不知道我是哪一步做错了 首先我是创建的vue2项目,基本操作跟平常一样,在运用路由跳转的时候遇到这个问题 ...

  4. vue脚手架创建项目名字报错

    vue inti webpack TimeManger 报错 Sorry, name can no longer contain capital letters 原来这个capital是大写的意思,上 ...

  5. vue脚手架创建项目及常用配置

    首先安装配置这两篇挺好的 https://www.cnblogs.com/lgx5/p/10732016.html https://blog.csdn.net/qiang510939237/artic ...

  6. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  7. Vue.js用脚手架创建项目

    安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...

  8. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  9. redis列表,字典,管道,vue安装,创建项目

    redis mysql,redis,mogondb 1.mysql,oracle:关系型数据库,有表概念 2.redis,mongodb/nosql:非关系型数据库 没有表概念 mongodb存储在硬 ...

随机推荐

  1. Oracle TNS-01190: The user is not authorized to execute the requested listener command

    今天,在玩 lsnrctl命令,是为了了解Oracle的一些配置. 当执行 show inbound_connect_timeout 命令之后,提示了错误信息: TNS-01190: The user ...

  2. [ Learning ] Spring Resources

    1. Spring MVC Spring MVC原理及配置详解 springMVC系列之(三) spring+springMVC集成(annotation方式) Mybatis3+Spring4+Sp ...

  3. Beta冲刺阶段5.0

    1. 提供当天站立式会议照片一张 2. 每个人的工作 (有work item 的ID) 成员 昨天已完成的工作 今天计划完成的工作 工作中遇到的困难 具体贡献 郑晓丽 首页活动详情界面的美化 实现首页 ...

  4. redis 知识点

    默认端口  6379 单个value 最大可以保存1G 默认RDB(异步刷盘方式) 禁用持久化修改redis.conf,找到save配置,改为save "" 即可 1. 特点 Re ...

  5. MQTT 发布者订阅者

    添加依赖: <dependency> <groupId>org.eclipse.paho</groupId> <artifactId>org.eclip ...

  6. PYQT5学习笔记之各模块介绍

    Qtwidgets模块包含创造经典桌面风格的用户界面提供了一套UI元素的类 Qtwidegts下还有以下常用对象,所以一般使用Qtwidegts时会使用面向对象式编程 QApplication: ap ...

  7. c# 使用checked和unchecked

    首先要知道int型在c#中是一个32位的数.由此可以知道int型的取值范围是(-2147483648~2147483647)当要使用int的最小值或者是最大值的时候,可以使用int.MinValue和 ...

  8. android使用ARouter跳转activity(阿里巴巴开源的)

    android使用ARouter跳转activity(阿里巴巴开源的) 使用ARouter方式,点击按钮跳转到其他activitypublic void buyOrSell(String str){ ...

  9. gitlab提交内容关联到slack通知

    gitlab提交内容关联到slack通知 https://docs.gitlab.com/ee/user/project/integrations/slack.html 首先去slack做相关的设置 ...

  10. Android Auto开发初探

    一.Android Auto 概述 二.Android Auto 使用方法 四.Android Auto应用开发 五.Android Auto开发总结 一.Android Auto 概述 最近物联网是 ...