创建一个基于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. 鼠标移动上去,元素旋转;web前端鼠标经过图片凸起

    .trans-rotate{ -webkit-transition: transform .25s linear; -moz-transition: transform .25s linear; -o ...

  2. hdu5290树形dp

    题意 给了n个点的数 每个点有一个w[i]权值,如果你选择了i这个点那么距离i这个点距离为w[i]的点将被除去,最后问 选则尽量少的点把这n个点全部删除 1<=n<=100000, 0&l ...

  3. 【转】推荐4个不错的Python自动化测试框架

    之前,开发团队接手一个项目并开始开发时,除了项目模块的实际开发之外,他们不得不为这个项目构建一个自动化测试框架.一个测试框架应该具有最佳的测试用例.假设(assumptions).脚本和技术来运行每一 ...

  4. web api HttpConfiguration

    //设置web api configuration public static void Register(HttpConfiguration config){ config.Services.Rep ...

  5. MySql 存储过程 退出

    mysql不支持quit, exit或return的方式退出编写存储过程时,为了业务规则需要,我们可能需要提前退出存储过程那么,我们可以利用leave label方式模拟实现quit退出的效果应用示例 ...

  6. STL容器之map

    [1]map容器 map 是关联容器.容器中的每一个元素都是由一个键值和一个数据值组成的. set 是一个集合它以其元素作为键值(同一个键值只能出现一次),且默认以升序排列. list 是一个顺序容器 ...

  7. arm cortex-m0plus源码学习(二)AMBA3.0_ AHBLite

    1. AMBA总线概述 AMBA2.0 以上版本都是基于单沿时钟.单向信号线的协议[1]. 现在市场上大部分的基于 AMBA 架构的 SoC 产品, 系统总线采用 AHB, 外部总线采用 APB.系统 ...

  8. python windows安装 SQLServer pymssql,

    1.到正儿八经的网站下载文件,找到适合自己的版本 2.把文件放到一个地方,能让pip找到就行, 不放scripts下面的话, 恐怕会报错“FileNotFoundError" 3. 走到pi ...

  9. Linux基础命令---netstat显示网络状态

    netstat netstat指令可以显示当前的网络连接.路由表.接口统计信息.伪装连接和多播成员资格等信息. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.open ...

  10. 远程服务调用RPC框架介绍,微服务架构介绍和RPC框架对比,dubbo、SpringClound对比

    远程服务调用RPC框架介绍,微服务架构介绍和RPC框架对比,dubbo.SpringClound对比 远程服务调用RPC框架介绍,RPC简单的来说就是像调用本地服务一样调用远程服务. 分布式RPC需要 ...