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构建项目步骤的更多相关文章

  1. vue 构建项目vue-cli

    1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...

  2. vue 构建项目遇到的请求本地json问题

    在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边 ...

  3. vue 构建项目 文件引入

    1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...

  4. vue 构建项目遇到的问题

    1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思 ...

  5. 关于vue构建项目的一些指令

    第一步: brew install nodejs(MAC机子下)  Windows直接官网下载对应版本node.js 第二步: 获取nodejs模块安装目录访问权限(Windows系统忽略)sudo ...

  6. vue搭建项目步骤(二)

    上篇是搭建Vue项目的基本,接下来是继续对做项目的记录.顺序并不一定. 五.对页面入口文件的修改: 众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件.但是有时候 ...

  7. Webpack+Vue构建项目

    第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...

  8. Vue构建项目

    构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用we ...

  9. 【记录】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 出现这问题控制台会有一 ...

随机推荐

  1. laravel7 百度智能云检测内容及图片

    1:百度智能云,获取AppID,API Key,Secret Key https://console.bce.baidu.com/ai/?_=1642339692640&exraInfo=ai ...

  2. php 23种设计模式 - 迭代器模式

    迭代器模式 迭代器模式 (Iterator),又叫做游标(Cursor)模式.提供一种方法访问一个容器(Container)对象中各个元素,而又不需暴露该对象的内部细节. 当你需要访问一个聚合对象,而 ...

  3. SSH 免密码认证登陆

    检查是否已安装ssh rpm -qa |grep ssh 如未安装可以重新安装 yum install -y openssl openssh-server 修改配置 vim  /etc/ssh/ssh ...

  4. Airtest安装与简介

    一:简介 什么是Airtest 网易的airtest其实是个测试套件,由Airtest框架.poco框架.airtestIDE 组成. Airtest框架 基于图像识别的自动化测试框架,是网易自己团队 ...

  5. ActiveMQ代码-01

    p2p模式 生产者 package com.activemq.activemqdemo.p2p; import org.apache.activemq.ActiveMQConnectionFactor ...

  6. Spring Boot 自定义Starter 可能引发的问题(Error)

    如果你的项目出现: Consider defining a bean of type 'com.wy.helloworld_spring_boot_starter.PersonService' in ...

  7. java小项目

    https://blog.csdn.net/redarmy_chen/article/details/11794145#(贪吃蛇) https://blog.csdn.net/likunkun__/a ...

  8. leedcode算法

    1.LeetCode - 合并两个链表 2. 3. 链表是否有环       https://jingyan.baidu.com/article/066074d69afb8d83c31cb068.ht ...

  9. super.getClass()方法调用?

    下面程序的输出结果是多少? import java.util.Date; public class Test extends Date{ public static void main(String[ ...

  10. Files的常用方法都有哪些?

    Files. exists():检测文件路径是否存在.Files. createFile():创建文件.Files. createDirectory():创建文件夹.Files. delete():删 ...