vue项目所用到的知识点摘要以及遇到的坑

有段时间没有搭建vue脚手架环境了，这两天自己成功搭建了下，记录一下坑，以及需要注意的地方

创建vue-cli项目:

1.安装nodejs环境

官网下载： 一直默认就行，路径可以改变但要记得到

安装完成后cmd，输入node -v npm-v，能看到node和npm的版本号，说明已经安装成功

2.安装vue-cli 一般我们用淘宝镜像安装

首先利用淘宝镜像安装cnpm：

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装完成输入：cnpm -v查看版本确保安装成功，和npm版本是否一样

3.全局安装vue-cli

cnpm install -g vue-cli

查看vue版本号:vue-V

以上步骤在一台电脑上安装成功之后下次在本电脑上创建项目的时候就不用重复步骤vue-cli 这个命令这个只需要运行一次，安装之后就不用安装了。

4.使用vue-cli 创建一个基于webpack模板的新项目:

cd 到你想要存入的路径

vue init webpack 项目名字

注意创建项目的时候到达最后一个选项的时候要选no最后一个选项,如果选择别的网速慢的话会下载很慢的，很可能会卡住

接下来

cnpm install

项目创建成功

npm run dev 启动项目

vue-cli 文件目录说明:

模拟数据，在vue-cli2.0以后就没有dev-server.js文件了，在2.0以后用webpack.dev.conf.js代替了，模拟数据方法如下：

在webpack.dev.conf.js文件中const portfinder = require(portfinder)之后加入以下
//模拟数据第一步
const express = require(express)
const app = express()//请求server
var appData = require(../data.json)//加载本地数据文件
var seller = appData.all//获取对应的本地数据
var apiRoutes = express.Router()
app.use(/api, apiRoutes)//通过路由请求数据

//第二步找到devServer,在里面添加
before(app) {
  app.get(/api/all,(req,res)=>{
    res.json({error: 0,
      data:all})
  }),
}

最后重新启动运行命令：npm run dev才能生效（很重要，否则无法请求到数据）

问题1：vue项目中使用stylus预处理器写css语法，老是出现

Cannot find module ‘stylus’ 的错误 是因为在webpack 里面用了 stylus-loader，但npm instatll 没有正确安装依赖，才会出现error： Cannot find module ‘stylus’。

解决办法： 重新npm install stylus 和 stylus-loader 在你所在的项目目录中，输入：

npm install stylus --save-dev npm install stylus-loader --save-dev