首页 > Web开发 > 详细

Vue+Webpack打造todo应用

时间:2019-10-17 22:55:35      阅读:93      评论:0      收藏:0      [点我收藏+]

使用工具idea

一、vue-loader+webpack项目配置

1.在盘符E:\project\idechuangyeproject\pom 新建vue-ssr-tech的文件夹

技术分享图片

 

 

2.idea打开工程项目pom,选中vue-ssr-tech文件右键选择Open in Terminal打开终端

终端输入:npm init    //初始化成一个npm的项目

E:\project\idechuangyeproject\pom\vue-ssr-tech>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue-ssr-tech)                //此处下面全部默认:回车往下
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\project\idechuangyeproject\pom\vue-ssr-tech\package.json:

{
  "name": "vue-ssr-tech",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes          //输入yes进入下一步
E:\project\idechuangyeproject\pom\vue-ssr-tech>

 此刻在vue-ssr-tech项目下就会生成一个package.json

3.然后就可以安装需要的包

我需要用到webpack和vue,所以安装webpack和vue(使用vue要用到vue-loader)

终端继续往下:npm i webpack vue vue-loader           // i : 全拼为install

E:\project\idechuangyeproject\pom\vue-ssr-tech>npm i webpack vue vue-loader
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vue-loader@15.7.1 requires a peer of css-loader@* but none is installed. 
      You must install peer dependencies yourself.                //根据WARN提醒还需要安装css-loader第三方依赖 npm WARN vue-ssr-tech@
1.0.0 No description npm WARN vue-ssr-tech@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win3 2","arch":"x64"}) + vue-loader@15.7.1 + vue@2.6.10 + webpack@4.41.2 added 346 packages from 206 contributors and audited 4268 packages in 216.616s found 0 vulnerabilities E:\project\idechuangyeproject\pom\vue-ssr-tech>

根据上面的安装WARN还需要安装css-loader

npm i css-loader

E:\project\idechuangyeproject\pom\vue-ssr-tech>npm i css-loader
npm WARN registry Using stale data from https://registry.npmjs.org/ because the host is inaccessible -- are you offline?
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN vue-ssr-tech@1.0.0 No description
npm WARN vue-ssr-tech@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win3
2","arch":"x64"})

+ css-loader@3.2.0
added 14 packages from 9 contributors in 58.634s

E:\project\idechuangyeproject\pom\vue-ssr-tech>

此时vue-ssr-tech项目就已经初始化好了

在项目下新建src文件夹作为源码放置的目录,此刻项目结构如下

技术分享图片

 

 

 

 

     

Vue+Webpack打造todo应用

原文:https://www.cnblogs.com/liwenhong199404/p/11695448.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!