(前提是已经安装了node)

一、简单介绍  Vue开发|文件目录结构部署

目录结构

   ├── index.html                      入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录,这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据(state)
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源,不会被wabpack构建。
└── test 测试文件目录(unit&e2e)
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js

 二、命令安装 依赖

  1、进入到项目根目录(文件夹)  

  

  2、命令  安装yarn

  

  成功之后如下图:

  

  3、安装依赖

  

  

  安装进行中:

  

  中间可能会有错误,个别依赖安装没成功,如:

  

  提示node-sass 没安装成功,

  命令yarn upgrade node-sass  更新node-sass,

  如果还是没安装成功,就单独利用淘宝镜像安装sass:

  命令yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass,如图:

  

  显示安装 成功。

  提示phantomjs没安装成功

  

  命令yarn config set phantomjs http://npm.taobao.org/mirrors/phantomjs,设置成功;

  4、跑项目

  命令yarn run dev,成功如图:

  

  

利用node,跑项目。的更多相关文章

  1. 利用node、express初始化项目

    前端做整站是开发,例如:前端是用了vue创建初始化项目,后端我们不会php.java等,我们只能用node去创建去做后端代码,本文就给大家讲解最基础的从零开始创建一个项目的后端环境. 一般来说前后端代 ...

  2. 利用node构建本地服务

    利用node构建本地服务 首先安装下node.js,地址为https://nodejs.org/en/,然后安装npm. node.js的中文api地址http://nodeapi.ucdok.com ...

  3. 利用Node.js对某智能家居服务器重构

    原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 之前负责过一个智能家居项目的开发,外包重庆一家公司的,我们主要开发服务器监控和集群版管理. 移动端和机顶盒的远程通信是用 ...

  4. 如何利用express新建项目(上)

    如何利用express新建项目(上) 摘要 这篇文章将讲解了如何快速利用express新建项目 一.express4.x的安装 1. npm install -g express 2. npm ins ...

  5. 【Node.js】利用node.js搭建服务器并访问静态网页

    node.js是一门服务端的语言,下面讲讲如何利用node.js提供给我们的api来搭建服务器,并且访问静态网页 项目结构如下 ------------------------------------ ...

  6. 教你利用Node.js漏洞搞事情

    PentestingNode.js Application : Nodejs Application Security 原文地址:http://www.websecgeeks.com/2017/04/ ...

  7. 如何更好的利用Node.js的性能极限

    通过使用非阻塞.事件驱动的I/O操作,Node.js为构建和运行大规模网络应用及服务提供了很好的平台,也受到了广泛的欢迎.其主要特性表现为能够处理庞大的并且高吞吐量的并发连接,从而构建高性能.高扩展性 ...

  8. 利用Node.js对某智能家居server重构

    原文摘自我的前端博客,欢迎大家来訪问 http://www.hacke2.cn 之前负责过一个智能家居项目的开发,外包重庆一家公司的.我们主要开发server监控和集群版管理. 移动端和机顶盒的远程通 ...

  9. 服务器小白的我,是如何将 node+mongodb 项目部署在服务器上并进行性能优化的

    前言 本文讲解的是:做为前端开发人员,对服务器的了解还是小白的我,是如何一步步将 node+mongodb 项目部署在阿里云 centos 7.3 的服务器上,并进行性能优化,达到页面 1 秒内看到 ...

随机推荐

  1. P5157 [USACO18DEC]The Cow Gathering

    首先考虑怎么check一个点是否能被最后一个删除. 可以这么建图,以这个点建有根树,边全部向上指,再加上剩下的有向边. 很明显,这里的一条边的定义就变成了只有删去这个点,才可以删去它指向的点. 因此, ...

  2. 46. 47. Permutations and Permutations II 都适用(Java,字典序 + 非字典序排列)

    解析: 一:非字典序(回溯法) 1)将第一个元素依次与所有元素进行交换: 2)交换后,可看作两部分:第一个元素及其后面的元素: 3)后面的元素又可以看作一个待排列的数组,递归,当剩余的部分只剩一个元素 ...

  3. 廖雪峰网站:学习python基础知识—循环(四)

    一.循环 1.for names = ['Michal', 'Bob', 'tracy'] for name in names: print(name) sum = 0 for x in [1, 2, ...

  4. 【Java】【6】JDK8 Stream操作整理

    摘要: 1,List<EntityOld>转换为List<EntityNew> List<EntityOld> list = oldList; List<En ...

  5. PAT 1013 Battle Over Cities

    1013 Battle Over Cities (25 分)   It is vitally important to have all the cities connected by highway ...

  6. 32. Longest Valid Parentheses最长有效括号

    参考: 1. https://leetcode.com/problems/longest-valid-parentheses/solution/ 2. https://blog.csdn.net/ac ...

  7. 1002. Find Common Characters查找常用字符

    参考:https://leetcode.com/problems/find-common-characters/discuss/247573/C%2B%2B-O(n)-or-O(1)-two-vect ...

  8. Beta阶段——第5篇 Scrum 冲刺博客

    Beta阶段--第5篇 Scrum 冲刺博客 标签:软件工程 一.站立式会议照片 二.每个人的工作 (有work item 的ID) 昨日已完成的工作 人员 工作 林羽晴 完成了邮箱发送功能的测试,测 ...

  9. 类似“未能加载文件或程序集“tesseractengine3”或它的某一个依赖项”等一些问题的解决方案

    有些时候我们引用了一些32位的dll,结果就会出现类似“未能加载文件或程序集“tesseractengine3”或它的某一个依赖项”这样的问题,原因是IIS的应用程序池的设置中默认是不启用32位的应用 ...

  10. Oracle 11.2.0.4.0 Dataguard部署和日常维护(5)-Datauard 主备切换和故障转移篇

    1. dataguard主备切换   1.1. 查看当前主备库是否具备切换条件 on slave select sequence#,first_time,next_time,archived,appl ...