2020-09-22

搭建vue开发环境的步骤

1. 在搭建vue的开发环境之前，一定一定要先下载node.js，，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，网址：http://nodejs.cn；

下载

2. 下载好node之后，打开docs管理工具，先看看node安装成功了没有，输入 node -v ，回车，会输出node的版本号，

image

这样就已经是安装成功了，由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具：$ npm install -g cnpm --registry=https://registry.npm.taobao.org；

3. 淘宝镜像安装成功之后，我们就可以全局使用vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

[图片上传中...(image-8acbf0-1600768309461)]

4. 搭建完手脚架之后，我们要开始建一个新项目，这个时候我建议，尽量不要装在C盘，因为vue下载下来的文件比较大，如果要改盘的话，直接输入D：回车就可以直接改盘，然后我们开始创建新的项目输入命令：vue init webpack my-project 回车，my-project是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车，直到出现是否要安装vue-router，这个我们在项目要用到，所以就输入y 回车

image

下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的

image

5. 文件夹已经下载好了，现在就可以进入文件夹，输入： cd my-project 回车，因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，

输入命令：cnpm install

image

6. 已经安装好之后，现在要来测试一下我们下载好的模板能不能正常的运行，在命令行输入：npm run dev 回车即可，

image

8080是默认的端口，要访问的话，直接在浏览器输入localhost:8080就可以打开默认的模板了；

image

这样，我们的vue基础项目已经安装并运行起来了。

以上是vue-cli2.0的脚手架搭建方式，现在已经升级到到4.0了 ,项目搭建方式也就更简单便捷了， 输入命令：
npm install -g @vue/cli ，下载脚手架工具，下载成功之后 输入命令：vue create <Project Name> 文件夹名称，

然后就是选择配置，第一个default是默认配置，第二个是手动配置，手动配置就要看自己的项目需要，配置需要的文件(不过一般我为了方便，都会选择默认配置，哈哈)，然后就等着创建文件夹；

文件创建成功之后，直接输入命令： npm run serve,就可以运行项目啦！

• 

  image

  查阅资料，发现网上的解决方法有以下几种：
  1 删除admin文件夹下的.npmrc文件
  2 清除npm-chache文件
  一一若试过之后发现并没有什么用。则尝试：

  

  20200403113846916.png

安装vue-cli4.0之后，需要进行配置，首先安装yarn：npm install -g yarn
，然后利用yarn安装vue-router ，进行路由配置安装。yarn可以安装所使用的任何插件。
yarn安装vue-router使得package.json的文件中增加

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.4.5"
  },

src下添加router.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/test',
      name:'test',
      component:test
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <router-view/>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  // components: {
  //   HelloWorld
  // }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注释掉东西。

编写less

1)安装less依赖：npm install less less-loader --save

2)安装成功之后，可在package.json中看到，多增加了2个模块：

        ![新增依赖](https://upload-images.jianshu.io/upload_images/7898366-1bcecd3fe292c037?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 3)编写less

       ![image](https://upload-images.jianshu.io/upload_images/7898366-fe1ac6d047a4af1e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

三、webpack配置sass模块的加载

1)安装sass的依赖包, sass-loader依赖于node-sass；css-loader和style-loader也是必须的依赖包

npm install css-loader  style-loader sass-loader node-sass --save-dev

css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；

style-loader将所有的计算后的样式加入页面中；

2)sass的使用方法如下

引入外部样式：import '../../css/test.scss'   require('../../css/test2.scss');

   在.vue文件中使用  <style lang="sass"> //sass语法样式 </style>

yarn add animate.css 添加动效
没有yarn可以用npm install animate.css --save

第二步：引入及使用：

main.js中：

import animated from 'animate.css' // npm install animate.css --save安装，在引入

Vue.use(animated)
使用：

vue模板中：
<div class="ty">
<div class="box animated bounceInDown"></div>
</div>
如果无效可以添加为：animate__animated animate__fadeInUp 这种双下划线效果，若无下划线之前的东西无效。

fade: {
        title: '淡入淡出',
        fadeIn: '淡入',
        fadeInDown: '向下淡入',
        fadeInDownBig: '向下快速淡入',
        fadeInLeft: '向右淡入',
        fadeInLeftBig: '向右快速淡入',
        fadeInRight: '向左淡入',
        fadeInRightBig: '向左快速淡入',
        fadeInUp: '向上淡入',
        fadeInUpBig: '向上快速淡入',
        fadeOut: '淡出',
        fadeOutDown: '向下淡出',
        fadeOutDownBig: '向下快速淡出',
        fadeOutLeft: '向左淡出',
        fadeOutLeftBig: '向左快速淡出',
        adeOutRight: '向右淡出',
        fadeOutRightBig: '向右快速淡出',
        fadeOutUp: '向上淡出',
        fadeOutUpBig: '向上快速淡出'
      },
      bounce: {
        title: '弹跳类',
        bounceIn: '弹跳进入',
        bounceInDown: '向下弹跳进入',
        bounceInLeft: '向右弹跳进入',
        bounceInRight: '向左弹跳进入',
        bounceInUp: '向上弹跳进入',
        bounceOut: '弹跳退出',
        bounceOutDown: '向下弹跳退出',
        bounceOutLeft: '向左弹跳退出',
        bounceOutRight: '向右弹跳退出',
        bounceOutUp: '向上弹跳退出'
      },
      zoom: {
        title: '缩放类',
        zoomIn: '放大进入',
        zoomInDown: '向下放大进入',
        zoomInLeft: '向右放大进入',
        zoomInRight: '向左放大进入',
        zoomInUp: '向上放大进入',
        zoomOut: '缩小退出',
        zoomOutDown: '向下缩小退出',
        zoomOutLeft: '向左缩小退出',
        zoomOutRight: '向右缩小退出',
        zoomOutUp: '向上缩小退出'
      },
      rotate: {
        title: '旋转类',
        rotateIn: '顺时针旋转进入',
        rotateInDownLeft: '从左往下旋入',
        rotateInDownRight: '从右往下旋入',
        rotateInUpLeft: '从左往上旋入',
        rotateInUpRight: '从右往上旋入',
        rotateOut: '顺时针旋转退出',
        rotateOutDownLeft: '向左下旋出',
        rotateOutDownRight: '向右下旋出',
        rotateOutUpLeft: '向左上旋出',
        rotateOutUpRight: '向右上旋出'
      },
      flip: {
        title: '翻转类',
        flipInX: '水平翻转进入',
        flipInY: '垂直翻转进入',
        flipOutX: '水平翻转退出',
        flipOutY: '垂直翻转退出'
      },
      strong: {
        title: '强调类',
        bounce: '弹跳',
        flash: '闪烁',
        pulse: '脉冲',
        rubberBand: '橡皮筋',
        shake: '左右弱晃动',
        swing: '上下摆动',
        tada: '缩放摆动',
        wobble: '左右强晃动',
        jello: '拉伸抖动'
      }