Vue安装步骤

一.需安装node.js

  1.1 (官方地址:https://nodejs.org/en/) 下载最新的即可

  1.2 安装完成之后

    用 npm -v 查看 npm版本

    安装node.js会默认帮你安装npm

二.使用Npm安装Vue.js

  2.1 由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。

   npm install -g cnpm --registry=https://registry.npm.taobao.org

        2.2 在用 Vue.js 构建大型应用时推荐使用 NPM 安装:

               # 最新稳定版

              $ cnpm install vue

        2.3 完成安装

三. 命令行工具

  3.1 全局安装 vue-cli

    npm install -g @vue/cli

  3.2 卸载vue-cli

    npm uninstall vue-cli -g

  3.3 创建vue项目

    vue-cli3.0 以后项目创建的命令变成了下面这样

    3.3.1 vue create <Project Name> //文件名 不支持驼峰(含大写字母)

    default 是使用默认配置

    Manually select features 是自定义配置

我的自定义配置如下

 选择是否使用路由 history router,其实直白来说就是是否路径带 # 号,建议选择 N,否则服务器还要进行配置

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的,dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

选择 ESLint 代码校验规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多

 然后选择什么时候进行代码校验,Lint on save 保存就检查,Lint and fix on commit   fix 或者 commit 的时候检查,建议第一个

下面就是如何存放配置了,In dedicated config files 存放到独立文件中(有多个配置文件),In package.json 存放到 package.json 中

本着项目结构简单的想法,我选择了第二个

 最后就是是否保存本次的配置了,N 不记录,如果选择 Y 需要输入保存名字

 然后就等待创建项目吧

 出现如图红框所示的提示,就搭建成功,进入项目目录,直接输入 npm run serve 就可以了

最后就可以直接访问啦!!简单吧。下次咱们就可以用vue来做一些简单的demo了。革命尚未成功,同志仍需努力呀!!!

12-26 17:38
查看更多