专栏首页Golang开发Vue开发环境搭建

Vue开发环境搭建

Vue的官方教程地址

https://cn.vuejs.org/v2/guide/

安装npm

nodejs中集成了npm 因此需要安装nodejs,官方地址是https://nodejs.org/en/ 查看当前npm版本

npm --version
6.4.1

升级npm

sudo npm install -g npm

安装vue

npm install vue

安装Vue CLI脚手架

$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
+ vue-cli@2.9.6
added 121 packages from 134 contributors, removed 10 packages, updated 1 package and moved 97 packages in 132.885s

安装webpack

npm install webpack -g

运行

npm run dev

nvm 安装 https://github.com/nvm-sh/nvm/blob/master/README.md

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.bash_profile or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion"  # This loads nvm bash_completion

安装Vue.js devtools

cdn 加速地址 https://www.bootcdn.cn/vue/

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

使用CLI3 创建项目

npm uninstall -g vue-cli
npm install -g @vue/cli
vue --version
3.8.2

使用脚手架创建helloworld工程

vue create hello-world
Vue CLI v3.8.2
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features
?  Successfully created project hello-world.
?  Get started with the following commands:
 $ cd hello-world
 $ npm run serve
cd hello-world
npm run serve

CLI3热部署项目使用的命令是

npm run serve

使用原先CLI2版本创建项目

vue init webpack my-project
$ vue init webpack my-project

? Project name my-project
? Project description A Vue.js project
? Author baxiang <baxiang@roobo.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-project".

运行项目

npm run dev
 DONE  Compiled successfully in 4486ms                                                                                                                             12:14:53 PM

 I  Your application is running here: http://localhost:8080  
Src目录结构
$ tree -L 2
.
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
└── router
    └── index.js

3 directories, 5 files

配置hello world 路由

在components文件夹下创建HelloVue文件

<template>
    <div>
      你好 Vue
    </div>
</template>

<script>
    export default {
        name: "HelloVue"
    }
</script>

<style scoped>

</style>

在router文件下的index.js增加路由配置

import HelloWorld from '@/components/HelloWorld'
import HelloVue from '@/components/HelloVue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/HelloVue',
      name: 'HelloVue',
      component: HelloVue
    },
  ]
})

创建hello world组件

<body>
<div id="app">
<!--  通过{{}}将data中定义的展示到页面-->
    {{msg}}
</div>
<script>
    //创建Vue实例,Vue实例管理html代码
    let vm = new Vue({
        // 通过构造函数参数el属性指定vue实例需要管理的范围,这个el属性的值是一个id
        el:'#app',
        // 通过data属性保存页面需要用到的数据
        data:{
            msg:"hello Vue"
        }

    })
</script>

</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spark——RDD

    全称为Resilient Distributed Datasets,弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变,可分区,里面的元素可并行...

    羊羽shine
  • golang-101-hacks(11)——切片结构

    切片有3部分组成 a)指针:指向底层数组中首位置; b)长度(类型为int):切片的有效元素个数; b)容量(类型为int):切片的容量。 看下面的代码...

    羊羽shine
  • MySQL——SQL查询优化

    慢查询日志 slow_query_log 启动停止记录慢查询日志,默认不启动 slow_query_log_file 指定慢查询日志的存储路径以及文件,默认...

    羊羽shine
  • 疫情下安踏体育是怎样展现较强抗风险能力和零售恢复力的?

    若按综合基准,不计分占合营公司亏损,安踏体育预计2020年上半年公司股东应占溢利将较上年同期下滑不超过25%;若按综合基准,计入分占合营公司亏损,安踏体育预计2...

    庄帅
  • 深度学习实践:从零开始做电影评论文本情感分析

    各方面都很好,但是总感觉哪里有点欠缺,后来想想,可能是作者做得太好了,把数据预处理都做得好好的,所以你才能“20行搞定情感分析”,这可能也是学习其他深度学习工具...

    AINLP
  • Reddit热议MIT新发现:对抗样本不是bug,而是有意义的数据特征!

    “对抗样本”(adversarial examples)几乎可以说是机器学习中的一大“隐患”,其造成的对抗攻击可以扰乱神经网络模型,造成分类错误、识别不到等错误...

    新智元
  • TiDB 在转转的业务实战

    世界级的开源分布式数据库 TiDB 自 2016 年 12 月正式发布第一个版本以来,业内诸多公司逐步引入使用,并取得广泛认可。

    PingCAP
  • 美国人的简易衣架为什么需要工业机器人来做?

    如今,一家制造这样简易衣架的工厂,也用上工业机器人了。这个故事听来很欢乐,但当你读完后,你一定会被故事里的这家工厂深深打动。 说到这看似毫无技术含量的简易衣架...

    机器人网
  • 使用 Ansible 安装部署 TiDB

    多机部署 TiDB 太繁琐?快来尝试我们的 TiDB 一键安装吧。本文介绍基于 Ansible Playbook 实现 TiDB 和监控组件的自动化安装和配置,...

    PingCAP
  • 属性的可枚举性与不可枚举性

    可枚举属性是指内部可枚举标志(enumerable)设置为true的属性,自然不可枚举属性即是enumerable为false

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券