vue-cli4搭建项目+配置+启动

一、安装node.js

   进入官网下载node.js

二、安装cnpm

  1、说明: npm (node package manager) 是nodejs的包管理器，用于node插件管理(包括安装、卸载、管理依赖等) :
  2、使用npm安装插件:命令提示符执行npm install <name>
  3、选装cnpm因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事!来自官网:“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率月前为10分钟-次以保证尽量与官方服务同步。”;
  安装: npm install -g cnpm -registry=https://registry.npm.taobao.org
  输入cnpm-v,可以查看当前cnpm版本
  PS:
  yarm是个包管理器，是facebook发布的一款取代 npm的包管理工具
  //npm 安装yarn
  npm install -g yarn

三、安装vue-cli4脚手架构建工具

   vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。
   1.先确认是否有安装过 vue-cli 
    vue -V 有的话 用 npm uninstall vue-cli -g
    输入命令 cnpm install -g @vue/cli
   指定版本:
   如是3.0以下
              npm install -g vue-cli@版本号
   如是3.0以上
              npm insall-g @vue/cli@版本号

四、创建项目

  vue create  项目名称

image.png

package.json文件中devDependencies和dependencies的区别
dependencies,依赖的意思，这些安装包都是程序所依赖的包，需要发布到生产环境的。
dev即develop,开发的意思，也就是开发环境下的依赖。
例如安装axios
安装到开发环境npm axios --save-dev
安装到生产环境npm axios --save
区别:
devDependencies中的插件只用于开发环境，不用于生产环境，而dependencies是 要发布到生产环境的。比如babe|有关的转化es6到es5的依赖只是开发环境下转化用，生产过程中是用不到，所以只用写在devDependencies中，而像vue或element-ui这种实际运行 会调用，得写在dependencies中。

五、运行项目

  npm run serve

需要项目在启动完成自动在浏览器打开，需在根目录配置vue.config.js文件

module.exports = {
    devServer: {
        port: 8080,
        host: 'localhost',
        open: true
    }
}

image.png

引入图片

items:[
        require('@/assets/img/1.png'),
        require('@/assets/img/2.png'),
        require('@/assets/img/3.png'),
        require('@/assets/img/4.png'),
        require('@/assets/img/5.png')
      ]