Webpack构建vue项目-记录

一，安装node.js

https://nodejs.org/en/

二，打开Node.js command prompt

三，执行命令

1.安装vue-cli

C:\deve\workspace\myproject>npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\Dong\AppData\Roaming\npm\vue-init -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\Dong\AppData\Roaming\npm\vue -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\Dong\AppData\Roaming\npm\vue-list -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 32.501s

2.修改chromedriver配置

C:\deve\workspace\myproject>npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver> chromedriver@75.0.0 install C:\deve\workspace\myproject\node_modules\chromedriver
> node install.jsCurrent existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  http://cdn.npm.taobao.org/dist/chromedriver/75.0.3770.8/chromedriver_win32.zip
Saving to file: C:\Users\Dong\AppData\Local\Temp\75.0.3770.8\chromedriver\chromedriver_win32.zip
Received 783K...
Received 1600K...
Received 2387K...
Received 3179K...
Received 3961K...
Received 4549K total.
Extracting zip contents
Copying to target path C:\deve\workspace\myproject\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\deve\workspace\myproject\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
npm WARN saveError ENOENT: no such file or directory, open 'C:\deve\workspace\myproject\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\deve\workspace\myproject\package.json'
npm WARN myproject No description
npm WARN myproject No repository field.
npm WARN myproject No README data
npm WARN myproject No license field.+ chromedriver@75.0.0
added 28 packages from 56 contributors and audited 1992 packages in 11.318s
found 0 vulnerabilities

3.创建项目名为my-project的项目

C:\deve\workspace\myproject>vue init webpack my-project'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���
? Project name my-project
? Project description A Vue.js project
? Author sagitarioo
? 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) npmvue-cli · Generated "my-project".# Installing project dependencies ...# Project initialization finished!
# ========================To get started:cd my-projectnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

4.启动

C:\deve\workspace\myproject>cd my-projectC:\deve\workspace\myproject\my-project>npm install
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.audited 31720 packages in 14.387s
found 84 vulnerabilities (65 low, 8 moderate, 10 high, 1 critical)run `npm audit fix` to fix them, or `npm audit` for detailsC:\deve\workspace\myproject\my-project>npm run dev> my-project@1.0.0 dev C:\deve\workspace\myproject\my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js12% building modules 24/31 modules 7 active ...pace\myproject\my-project\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "bab 95% emittingDONE  Compiled successfully in 7514ms                                                                       11:28:18 PMI  Your application is running here: http://localhost:8080

5.打开浏览器

配置vue图形界面

vue ui 是3.0才推出的版本，我使用的时候最新稳定版为2.9.6，所以没有这个功能，故要安装最新的vue

C:\deve\workspace\myproject>npm install -g @vue/cli
C:\Users\Dong\AppData\Roaming\npm\vue -> C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js> core-js@3.1.3 postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js
> node scripts/postinstall || echo "ignore"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)> core-js-pure@3.1.3 postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js-pure
> node scripts/postinstall || echo "ignore"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)> protobufjs@6.8.8 postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\protobufjs
> node scripts/postinstall> nodemon@1.19.1 postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0Love nodemon? You can now support the project via the open collective:> https://opencollective.com/nodemon/donatenpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ @vue/cli@3.8.3
added 809 packages from 541 contributors in 105.459s

启动vue ui

C:\deve\workspace\myproject>vue ui
?  Starting GUI...
?  Ready on http://localhost:8000

其他

第一次尝试没有使用官方脚手架，是参考的这篇文章：随我来基于webpack构建一个简易的vue脚手架 (webpack系列二) - 努力学会微笑 - segmentfault

按照该教程的步骤来搭建。由于插件版本问题，会报一个错：

C:\deve\vue-cli\vues>npm run dev> vues@1.0.0 dev C:\deve\vue-cli\vues
> webpack-dev-server --open --hotC:\deve\vue-cli\vues\webpack.config.js:30new CleanWebpackPlugin(['dist']),  // 告诉清理插件的目录^TypeError: CleanWebpackPlugin is not a constructorat Object.<anonymous> (C:\deve\vue-cli\vues\webpack.config.js:30:5)at Module._compile (internal/modules/cjs/loader.js:776:30)at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)at Module.load (internal/modules/cjs/loader.js:653:32)at tryModuleLoad (internal/modules/cjs/loader.js:593:12)at Function.Module._load (internal/modules/cjs/loader.js:585:3)at Module.require (internal/modules/cjs/loader.js:690:17)at require (internal/modules/cjs/helpers.js:25:18)at WEBPACK_OPTIONS (C:\deve\vue-cli\vues\node_modules\webpack-cli\bin\utils\convert-argv.js:116:13)at requireConfig (C:\deve\vue-cli\vues\node_modules\webpack-cli\bin\utils\convert-argv.js:118:6)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vues@1.0.0 dev: `webpack-dev-server --open --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vues@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Dong\AppData\Roaming\npm-cache\_logs\2019-06-13T14_14_25_609Z-debug.log

需要修改位置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');  // 清理构建目录下的文件plugins:[new CleanWebpackPlugin(),  // 告诉清理插件的目录
],

运行效果：

代码可参考：https://github.com/Sagitarioo/Personal/tree/master/study

由于node_modules文件夹中的小文件太多，故没有同步。

目录结构：

vues
├─node_modules
│  ├─.bin
│  ├─@types
│  ├─@vue
│  └─...
├─src
│  ├─app.vue
│  └─index.js
├─index.html
├─package.json
└─webpack.config.js

Webpack构建vue项目-记录相关推荐

提高 webpack 构建 Vue 项目的速度
提高 webpack 构建 Vue 项目的速度前言最近有人给我的 Vue2 后台管理系统解决方案提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了 ...
webpack构建Vue项目引入jQ时发生“'$' is defined but never used”的处理
今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm ...
webpack构建vue项目
参考地址:1.https://nodejs.org/en/ ( 电脑先下载node.js 他提供了 npm这个工具 (最好搞成淘宝镜像 http://www. ...
Vue学习之环境构建--------vue-cli构建vue项目
周围的朋友一直都在说vue的优点,之前一直在看angular,抱着好奇心学习了vue,想从最基础的地方记录我的vue.首先第一步离不开环境的搭建,那么就来记录我的vue环境搭建之路. 同作为前端的流行 ...
最详细的vue-cli工具构建vue项目教程
最详细的vue-cli工具构建VUE项目教程一.安装node环境 1. 进入node 官网下载安装网址 https://nodejs.org/zh-cn/ 2. 默认安装(安装在C盘) 3. 安装 ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
vue-cli快速构建vue项目和本地模拟请求数据
Vue-cli快速构建 Vue 项目和本地模拟请求数据 1 前提: 安装了 node.js 首先: 全局安装 vue-cli npm intsall vue-cli -g (-g代表全局安装) 2 使 ...
从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
vuex构建vue项目_如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序
vuex构建vue项目如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue ...