安装vue脚手架

VUE-CLI脚手架的搭建过程

1、安装node js

  下载地址:http://nodejs.cn/download/

2、安装完成后运行Node.js command promptnode -v查看安装版本)


3、安装npm(由于现在版本的nodejs已经集成npm所以无需安装,可以用npm -v 查看版本)


4、注册cnpm来代替npm  使用命令:npm install cnpm -g --registry=https://registry.npm.taobao.org

  如果你发现你安装成功了,使用cnpm却发现找不到命令,那么就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\Program Files\nodejs\node_modules"

3.安装webpack

    npm install webpack@3.8.1 -g             //-g全局安装webpack版本3.8.1==》          webpack -v查看版本号

5、安装vue脚手架vue-cli  命令:cnpm install -g vue-cli

  安装成功后可以用vue -V 查看vue版本6、cd到对应的目录下初始化vue项目  命令:vue init webpack my-project      Project name项目名       Project description项目名描述       Author作者邮箱       Use ESLint to lint your code?是否需要ESlist语法检查       Setup unit tests with Karma + Mocha?是否需要单元测试       Setup e2e tests with Nightwatch? Yes是否需要e2e测试 

7、package.json为项目依赖资源,如果要运行这个项目需要使用cnpm install安装依赖项(直接在项目文件夹路径下执行)

8、使用命令cnpm run dev启动项目,浏览器会打开http://localhost:8080/#/看到以下效果

  开发时属于热部署状态,代码保存后浏览器会自动刷新,错误提示也非常友好。


9、编译打包 cnpm run build

  会编译打包到项目dist文件夹下,然后我们就可以部署到服务器上(注意:如果你直接打开index.html,可能页面会是一片空白,这是由于你引用的js路径有问题)


10、安装axios插件

  cnpm install axios//生产环境

  npm install --save axios vue-axios//测试环境  两者都下载  在main.js 中写入以下内容:

  import Vue from 'vue'

  import axios from 'axios'

  import VueAxios from 'vue-axios'

  Vue.use(VueAxios, axios)  在页面中的用法:

  Vue.axios.get(api).then((response) => {

  console.log(response.data)

  })

  this.axios.get(api).then((response) => {

  console.log(response.data)

  })

  this.$http.get(api).then((response) => {

  console.log(response.data)

  })

  或者在main.js 中写入以下内容:

    import axios from 'axios'    Vue.prototype.$axios = axios

  使用页面

  this.$axios.get(api).then((response) => {

  console.log(response.data)

  })

11、安装jquery依赖

  npminstall jquery --save

在main.js中写入以下内容:    import $ from 'jquery'

12、脚手架目录介绍


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容