09月01, 2020

VUE开发环境搭建

Vuejs是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

搭建步骤

一、环境搭建

  1. 对于中国大陆用户,建议将 npm 源设置为国内的镜像,可以大幅提升安装速度。
npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. npm最新稳定版安装
cnpm install vue
  1. 命令行工具(CLI)安装(注意:3.0安装直接看下面第2项)
cnpm install -g vue-cli

注意:新版本Vue CLI3安装方法不同,新安装直接看下面第2项。

二、关于旧版本

  1. Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 下面命令进行卸载后安装。
npm uninstall vue-cli -g

或者

yarn global remove vue-cli
  1. 可以使用下列任一命令安装这个新的包
npm install -g @vue/cli

或者

yarn global add @vue/cli
  1. 安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

    你还可以用这个命令来检查其版本是否正确 (3.x):

vue --version

三、初始化项目

  1. 初始化项目

    vue init webpack demo 
    注意:3.0后创建项目改为:vue create demo  

    初始化项目说明:(注意:3.0后选项有所不同,会提示让选择需要安装的插件,有默认、自己选择以及自己配置后保存,下次直接选择自己这次保存的选项),不明白的可以留言。

    Project name         --项目名称
    Project description         --项目描述
    Author         --作者
    
    Install vue-router? No        --是否安装router路由
    Use ESLint to lint your code? No        --是否安装代码格式检测工具
    Set up unit tests No        --是否安装测试模块
    Setup e2e tests with Nightwatch? No        --同样是,是否安装测试模块
    
    接下来回车,通过npm进行安装
  2. 进入项目

    cd demo
  3. 安装依赖

    cnpm install
  4. 启动项目

    npm run dev
    注意:3.0后启动改为:npm run serve
  5. 打开浏览器输入地址查看是否启动成功

    http://localhost:8080

注意:只用进行了第一步设置,才能使用淘宝的镜像,才可以使用cnpm,否则还是使用npm命令。

四、项目目录结构

2.0目录结构,3.0差不多,少了一些文件。

  1. 主要文件
index.html    --项目根视图
package.json    --配置文件
README.md    --说明文件
.postcssrc.js    --postcss配置文件
.gitignore    --github上传时,忽略的上传文件类型配置
.editorconfig    --一些编码配置,可以忽略该文件
.babelrc    --ES6的
  1. 主要目录
static    --静态文件目录,项目启动后可以直接访问里面的文件或内容。
src    --源码文件
config    --配置文件,开发服务器的配置
build    --服务器配置文件,webpack配置文件
  1. src目录
main.js    --入口文件
App.vue    --单文件主组件
components    --子组件
assets    --公共资源文件

本文链接:https://www.yanxizhu.com/post/VUE development environment construction.html

-- EOF --

Comments