Vue项目的创建

一、第一步npm安装

1、先安装nodejs和npm

   安装好之后，查看版本

  node -v    
  npm  -v

2、安装使用淘宝NPM 镜像

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

二、项目初始化

1、第一步：安装vue-cli

vue-clinnpm install -g @vue/cli   【g全局安装】

npm install -g @vue/cli-init 【vue-cli桥接工具】

2、创建基于webpack 模板的项目

 vue init webpack project(项目名称)

2.1 cmd页面 输入vue init webpack first-vue  

?Project name  项目名

?Project desciption 项目描述

?Author  作者

?Vue build   打包方式，回车即可

?Install vue-router?  是否需要a安装vue-route,项目中使用到——y回车

?Use ESLint to lint your code?  是否需要 js 语法检测 目前不需要——n回车；

?Set up init tests? 是否安装 单元测试工具 目前不需要 ——n回车

?Setup e2e tests with Nightwatch? 是否需要 端到端测试工具 目前不需要 ——n回车

2.2 进入项目，安装依赖

cd project

npm install

npm run dev

 2.3 访问路径http://localhost:8080,出现vue界面就可以了

3、问题

vue项目的默认端口是8080，想运行多个，修改一下配置文件 config --> index.js --> port 里面的默认端口号。

三、升级vcli版本出错

npm uninstall -g @vue/cli //卸载
npm cache clean -f //清除缓存

四、配置项目

1.移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。

npm install fastclick

2.CSS预处理：

npm install stylus --save  

 <style scoped lang="stylus">  

 scoped意思是只在这个页面组件生效

五、错误

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1a2e1f3a","scoped":true,"hasInlineConfig":false}!stylus-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Header.vue in ./src/pages/Home/components/Header.vue

解决方式：

1.删除node_modules

2.package.json文件的dependencies添加 "stylus-loader": "^3.0.2",

3.npm install

六、字体图标

1.图标库 https://www.iconfont.cn/

2.下载图标

3.引入样式和图标

import 'styles/reset.css'

import 'styles/border.css'

import 'styles/iconfont.css'

七、打包项目

npm run build