vue的安装配置与项目创建

1,安装vue必须先安装node.js。  --------去官网安装node.js

因为npm依赖node.js环境，使用npm的时候需要安装node.js。安装node.js的时候npm会默认安装。【npm在国内使用比较慢，推荐使用淘宝开发的cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org】

在官网安装node.js，简易安装最新版本，版本必须>8.0;

2，安装vue.js-----npm install vue [【推荐vue官方文档】

3，安装cli----- npm install -g vue-cli

npm install -g @vue/cli 安装vue-cli3.0

npm install -g @vue/cli-init 拉取2.0旧版本 最后升级到3.0版本

 

cmd创建项目：

vue init webpack 项目名称---------- 创建vue项目 【 注意项目名称不能大写！！注意在后续创建组件的时候组件名称不能与标签名重复】        

正确创建vue项目的顺序 ，不安装路由，不要代码检查，no，no,自己安装依赖。

创建好项目之后，将路径定位到项目文件夹根目录；

npm install; npm run dev/npm start运行项目；

http://localhost:8080/ 在浏览器打开

 

使用vscode创建vue项目：

1. vscode左下角打开终端；

2. 定位到项目文件根目录；

3. vue create 项目名称；

4. 选择预设----------手动选择

? Please pick a preset: (Use arrow keys)   请选择预设
> default (babel, eslint)   默认（javascript编译器,javascript代码检查工具）
  Manually select features	手动选择

　　5.选择【Babel ,Router , CSS Pre--processors, Linter/Formatter 】

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 检查项目所需的功能：（空格选择，a全选，i反转）

>(*) Babel  javascript编译器，用来解析es6代码 【因为一些浏览器不能识别es6代码，babel工具可以将es6代码转译成浏览器能够识别的代码

 ( ) TypeScript  类型脚本，是JavaScript的超集，支持所有JavaScript语法。用于：静态类型检查，智能提示函数名等，代码重构[重命名符号--可以对所有的引用都进行修改；自动更新引用路径；修改函数名等会校验提示。]；可读性。
 
 ( ) Progressive Web App (PWA) Support  渐进式网络应用程序。优点[可靠--当无网状态时，也可以立即加载出页面pwa;快速--网页加载速度很快；不用从应用商店下载，可以直接添加在用户的主屏幕上，提供类似于app的使用体验，意味着不用流量]
 
 (*) Router	路由管理器 用于实现页面交互[控制页面跳转]，切换页面的时候不需要重新加载页面，单页面应用，不重新加载页面，不跳转到新页面，只是页面上的组件切换。还可以实现页面间传递参数
 
 ( ) Vuex [构建大型应用的价值] 可以解决不同组件之间的数据共享和数据持久化的问题。 当多个组件依赖于同一状态，或者需要共享状态的时候，通过vuex可以方便组件之间的数据共享和通讯。
 
 (*) CSS Pre-processors  css预处理器 作用:[文件切分；模块化--方便代码分层，复用，依赖管理；选择符允许嵌套；变量--给属性值一个变量，方便风格统一，换肤等；运算--让值与值之间建立联系；函数；Mixin--类似于函数，用来产生一段css代码;工程化]
 
 (*) Linter / Formatter   代码规范标准
 
 ( ) Unit Testing   单元测试
 
 ( ) E2E Testing    e2e测试

　　6.yes   【history模式：路由地址都是以"#"形式展示，但是有些时候，我们又希望路由地址中不出现"#"，mode: 'history', // 去掉路由地址的#】

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  y
使用路由器的历史模式？（需要为生产中的索引回退设置正确的服务器，即需要服务器支持）

　　7.Less         https://blog.csdn.net/qq_35430000/article/details/87097696   ----->   Sass 、Scss、LESS 和 Stylus区别总结

 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)  选择一个css预处理器（默认情况下支持postcss、autoprefixer和css模块）
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

　　8.ESLint with error prevention only 【basic】；仅含防错功能 ESLint是JS代码检查工具   

? Pick a linter / formatter config: (Use arrow keys)  选择一个配置
> ESLint with error prevention only  eslint仅具有错误预防功能
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier   eslint是代码规范和错误检查工具

　　9.Lint on save;  【这里不是太明白

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)		选择其他绒布功能
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

　　10.In dedicated config files 保存在专用的文件；   【这里不是太明白

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) 希望在哪里放置babel，postcss,eslint等的配置
> In dedicated config files		在专用的配置文件中  
  In package.json	

　　11.no;

? Save this as a preset for future projects? (y/N)	是否将此设置保存为将来项目的预设

　　

• 等待创建完成；

• 查看npm版本 更新npm版本到最新版：npm install -g npm

• 启动项目：npm run serve

•  如果vue项目启动的时候报错：原因可能是在node_modules文件夹，先删除，然后再安装，再启动。

  npm install rimraf -g   安装删除工具

  rimraf node_modules    删除文件夹
  
  npm install 重新安装文件夹
  
  npm run build; 
  
  npm run dev
  
  
  补充：

  • 安装axios： npm install --save axios;

  • 安装swiper：cnpm install --save vue-awesome-swiper 组件运用

    使用： import 'swiper/dist/css/swiper.css'

    import { swiper, swiperSlide } from 'vue-awesome-swiper'

    导出两个组件：components: {

    swiper,

    swiperSlide

    }