VueJS 环境的搭建

使用git搭建VueJS开发环境

安装git

git官网下载: https://www.git-scm.com/download/html

安装后进入 git bash 终端

安装nodeJS

安装git后,咱们须要使用npm工具,这时候就要安装nodeJS了,由于nodejs会自带npm工具。vue

nodeJS官网下载: https://nodejs.org/en/download/node

以后就像安装软件同样安装就好了,成功后,能够在git bash终端中查看版本,显示了版本,就说明你已经安装成功了。

$ node -v
$ npm -v webpack

安装webpack:最新版本

npm install --save-dev webpackgit

其余安装参考webpack官方文档:

https://webpack.js.org/guides/installation/web

安装vueJS

官方文档参考安装:

https://cn.vuejs.org/v2/guide/installation.htmlvue-cli

1. 独立版本

可在Vue.js官网上直接下载vue.min.js并用<script>标签引入。npm

下载Vue.js:https://vuejs.org/js/vue.min.jsjson

2. 使用CDN

unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和npm发布的最新的版本一致。bash

3. NPM方法

以为npm安装速度慢的话,也能够使用淘宝的镜像及其命令cnpm

使用淘宝NPM镜像:npm命令

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

搭建Vue工程

  • 1. 安装脚手架vue-cli:

    • 全局安装脚手架vue-cli(命令行工具):
      cnpm install

      $ cnpm install --global vue-cli

      or npm install

      npm install -g @vue/cli

      or yarn install

      yarn global add @vue/cli

    注意:-g或者global表示全局安装,不加-g或global表示本项目安装

    • Vue CLI 指南

    https://cli.vuejs.org/guide/

  • 2. 初始化项目 Vue init <template-name> <project-name>

    Vue init webpack my-project

    以后进行一些配置,默认回车就行,完成后终端有项目启动的提示。

    觉得以前本身搭建项目环境的时候,使用npm install的时候太慢了,并且会报错,改下用淘宝镜像初始化就好了

    npm install --registry=https://registry.npm.taobao.org
    npm run dev

项目就搭建完成了!

固然若是你是用vue3.0版本的话,你的配置文件package.json就会自动生成命令

"scripts": { "build": "vue-cli-service build", "serve": "vue-cli-service serve" }

若是没有跑成功,就须要看看配置文件package.json中的配置是否有问题。

相关文章
相关标签/搜索