vue构建项目步骤
1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题
2.命令行里运行npm install --global vue-cli
3.npm install --global webpack
安装的时候报了:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
查了下是因为 fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告,忽略即可https://segmentfault.com/q/1010000004498934
4.到你想建项目的地方打开命令行, vue init webpack-simple 【my-project-name】里面有一些选项,一路回车就可以了
5.进入到文件夹里面 继续执行npm install
6.安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
npm install vue-router vue-resource --save
还有一些别的模块:
npm install vuex --save
npm install style-loader --save-dev
:
npm install css-loader --save-dev
:
npm install file-loader --save-dev
7.npm run dev
浏览器弹出这样的页面就说明大功告成啦
vue构建项目步骤的更多相关文章
- vue 构建项目vue-cli
1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...
- vue 构建项目遇到的请求本地json问题
在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置 根目录/static下.如项目名/static/data.json,这边 ...
- vue 构建项目 文件引入
1.vue引用依赖文件. 举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...
- vue 构建项目遇到的问题
1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思 ...
- 关于vue构建项目的一些指令
第一步: brew install nodejs(MAC机子下) Windows直接官网下载对应版本node.js 第二步: 获取nodejs模块安装目录访问权限(Windows系统忽略)sudo ...
- vue搭建项目步骤(二)
上篇是搭建Vue项目的基本,接下来是继续对做项目的记录.顺序并不一定. 五.对页面入口文件的修改: 众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件.但是有时候 ...
- Webpack+Vue构建项目
第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...
- Vue构建项目
构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用we ...
- 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details
今天构建vue项目执行npm install初始化后报错 run `npm audit fix` to fix them, or `npm audit` for details 出现这问题控制台会有一 ...
随机推荐
- laravel7 百度智能云检测内容及图片
1:百度智能云,获取AppID,API Key,Secret Key https://console.bce.baidu.com/ai/?_=1642339692640&exraInfo=ai ...
- php 23种设计模式 - 迭代器模式
迭代器模式 迭代器模式 (Iterator),又叫做游标(Cursor)模式.提供一种方法访问一个容器(Container)对象中各个元素,而又不需暴露该对象的内部细节. 当你需要访问一个聚合对象,而 ...
- SSH 免密码认证登陆
检查是否已安装ssh rpm -qa |grep ssh 如未安装可以重新安装 yum install -y openssl openssh-server 修改配置 vim /etc/ssh/ssh ...
- Airtest安装与简介
一:简介 什么是Airtest 网易的airtest其实是个测试套件,由Airtest框架.poco框架.airtestIDE 组成. Airtest框架 基于图像识别的自动化测试框架,是网易自己团队 ...
- ActiveMQ代码-01
p2p模式 生产者 package com.activemq.activemqdemo.p2p; import org.apache.activemq.ActiveMQConnectionFactor ...
- Spring Boot 自定义Starter 可能引发的问题(Error)
如果你的项目出现: Consider defining a bean of type 'com.wy.helloworld_spring_boot_starter.PersonService' in ...
- java小项目
https://blog.csdn.net/redarmy_chen/article/details/11794145#(贪吃蛇) https://blog.csdn.net/likunkun__/a ...
- leedcode算法
1.LeetCode - 合并两个链表 2. 3. 链表是否有环 https://jingyan.baidu.com/article/066074d69afb8d83c31cb068.ht ...
- super.getClass()方法调用?
下面程序的输出结果是多少? import java.util.Date; public class Test extends Date{ public static void main(String[ ...
- Files的常用方法都有哪些?
Files. exists():检测文件路径是否存在.Files. createFile():创建文件.Files. createDirectory():创建文件夹.Files. delete():删 ...