Vue开发环境配置（一）

一、安装node

　　到node官网:https://blog.csdn.net/wulala_hei/article/details/85000530 下载系统对应版本安装即可。

　　npm是node的一个包管理工具，在node安装完成之后就可以使用npm.

二、安装vue-cli

　　什么是vue-cli???

　　vue-cli是前端开发的一种脚手架工具。那么什么又是脚手架工具呢？类比于建筑学上，脚手架指施工现场为工人操作并解决垂直和水平运输而大蛇的各种支架，有了这些支架的支持，施工作业才可以展开。换句话说，脚手架工具为施工搭建好了环境。在前端开发中，脚手架工具的作用也是类似的，为我们配置环境和工具，是我们更加专注于业务。
　　（1）全局安装webpack

npm install webpack -g

　　(2)从webpack 4.X 开始，再安装vue-cli之前需要安装 webpack-cli 依赖

npm install webpack webpack-cli -g

　　（3）安装vue-cli

npm install -g vue-cli

　　　(4)安装完成后，检验是否安装成功，输入 vue-V (注意：这里是大写的 “V”)，如果出现版本号，则说明安装成功。

vue -V

三、用 vue-cli 来构建项目。

　　1.首先，在D盘新建一个文件夹作为项目的存放地，然后cd到目录下，输入命令，创建项目

vue init webpack vue-demo

　　2.等待模板下载成功后，会有一个交互式的选项让你选择：

? Project name vue-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我选的NPM

　　3.安装完成后，安装提示，cd 到项目目录, 执行命令 npm install 进行初始化。

To get started:

  cd vue-demo
  npm run dev

　　4.启动项目

npm run dev

 DONE  Compiled successfully in 4014ms                                                   

 Your application is running here: http://localhost:8080

　　如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js 的 post

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {}, // 这里可以配置跨域

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // 端口 就是改这里
    autoOpenBrowser: false, // 这里是ture的话，就会自动打开浏览器

　　我的端口没有被占用，所以直接启动成功，打开 http://localhost:8080 就能看到欢迎页面

Vue开发环境配置（一）

猜你喜欢