weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

【Vue教程一】Vue介绍、Vue安装、项目目录介绍_cdn.jsdelivr.net/npm/vue@2下载到本地

作者：weixin_40725706 | 2024-04-04 14:39:49

踩

cdn.jsdelivr.net/npm/vue@2下载到本地

一、Vue介绍：

Vue.js是一套构建用户界面的前端框架，只关注视图层，还便于与第三方库(插件)兼容，能够帮我们减少不必要的dom操作；提高渲染效率；双向数据绑定。

二、Vue安装：

方式1：下载js到本地，直接用<script>引入，Vue 会被注册为一个全局变量。

在官网（安装 — Vue.js）下载开发版本vue.js（生产版本是vue.min.js）到本地，用<script>标签引入：

<script src="common/vue.js"></script>

方式2：使用CDN方式，用<script>引入：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

方式3：使用NPM，构建大型应用时，推荐使用该方式。

建议用cnpm替代npm。淘宝npm镜像：npmmirror 中国镜像站

安装命令：【npm install -g cnpm --registry=https://registry.npm.taobao.org】

简单来说，搭建应用就是下面几行命令：

step1、【cnpm install --global vue-cli】 //全局安装 vue-cli，输入命令（安装一次即可）

进入指定文件夹，例如进到D盘根目录【D:】

step2、【vue init webpack firstvue】 //接下来一路回车，静静等待就好，注意firstvue为项目名，要小写，不然到下一步还是要改成小写【这个命令是安装vue 2.x 模板 (旧版本)】

step3、进入项目，安装并运行，输入命令：

【cd firstvue】

【npm install】一次

【npm run dev】

然后访问 【http://localhost:8080/】即可，出现的页面如下图所示：

或者使用官网脚手架命令：

1、安装


npm install -g @vue/cli
# OR
yarn global add @vue/cli

2、创建项目

vue create my-project

今天（2022.07.05）试了下这个命令，结果命令行出现下面的提示信息

3、运行


【cd my-project】
 
【npm run serve】

三、项目目录介绍：

使用第3种方式创建的项目，用VSCode开发工具打开，项目目录如下图所示：

其中index.html是入口文件；src主要是开发项目放的文件；src\main.js也是vue的入口js文件；src\App.vue是一个根组件。

1、入口index.html文件：结构很简单，只有一个id为app的div元素。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vuedemo01</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2、src\main.js入口js文件：


import Vue from 'vue'
import App from './App'
import router from './router'
 
Vue.config.productionTip = false
 
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

说明：new Vue中的代码表示将App组件挂载到了id=app的节点上了，"#app"与public\index.html中有个id="root"的根节点相对应。

3、App.vue文件：App就是默认创建的组件


<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

说明：export default { name: 'App' } 表示把组件暴露给外部使用。

4、src\router\index.js文件：src\main.js中的import router from './router'，其实就是指向该文件：


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

说明：其中HelloWorld也是一个组件。

在用脚手架安装时，需要用到一些命令，在此记录一下：

1、查看npm版本：【npm -v】

2、更新npm版本：【npm install npm -g】

3、查看node版本：【node -v】

注：没有安装node的同学请到官网(https://nodejs.org/en/download/)下载安装。安装了node的话，npm也会一起安装好了。
安装成功后在命令行查看node版本，如果有版本号则说明安装成功。

4、安装依赖：【npm install】

5、进入D盘：输入【d:】回车即可

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/359283