【vue】初探vue,创建vue项目

简介: 前言:如果要开发一个平台,不仅需要掌握后端技术,还需要通过前端页面进行展示,即达到美观效果,又方便我们进行操作达到很好的交互效果。这里我接触到了vue前端框架,市面上有很多比较好用的基于vue的前端组件库,比如面向app的饿了么Mint UI,面向腾讯微信内网页和微信小程序的We UI,服务于pc界面的iView UI,面向所有层次的layUI,还有现在即将要学习的饿了么推出的Element UI,主要用于浏览器界面展示的框架;

前言:

如果要开发一个平台,不仅需要掌握后端技术,还需要通过前端页面进行展示,即达到美观效果,又方便我们进行操作达到很好的交互效果。

这里我接触到了vue前端框架,市面上有很多比较好用的基于vue的前端组件库,比如面向app的饿了么Mint UI,面向腾讯微信内网页和微信小程序的We UI,服务于pc界面的iView UI,面向所有层次的layUI,还有现在即将要学习的饿了么推出的Element UI,主要用于浏览器界面展示的框架;

一、安装node.js

安装《软件安装包》目录下的 node-v12.18.2-x64.msi

下载地址:https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi

终端窗口查询是否安转对应node或者npm:

node -v

npm -v

image.gif编辑

二、安装淘宝cnpm

NPM镜像_NPM下载地址_NPM安装教程-阿里巴巴开源镜像站

打开终端,执行如下命令:

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

查询cnpm信息:cnpm -v

image.gif编辑

 

创建项目:cnpm --startproject [projectname]

 

三、安装vue-cli脚手架

#使用npm
npm install -g @vue/cli
#或者使用淘宝npm镜像源(建议使用cnpm)
cnpm install -g @vue/cli

image.gif

如果安装过程中报如下错:

To install it, you can run: npm install --save vue-runtime-helpers

执行如下命令:

npm install --save vue-runtime-helpers

四、使用vs code或者webstorm创建工程项目

建议安装git进行源码管理

#创建项目
vue create 项目名
或者在webstorm里新建一个vue.js的项目
#如果使用gitbash
winpty vue.cmd create 项目名
#或者创建默认工程目录
vue create 项目名 --default
#用命令vue init webpack+项目名称
#来生成和初始化项目,推荐初始化项目名称到加入路由那处选择默认,之后全选no,之后npm初始化那里选推荐默认选项npm就好;
如下图所示:

image.gif

image.gif编辑

image.gif编辑

 

五、启动项目

方法1:

打开terminal,执行如下命令:

cnpm run serve

方法2:

进入到指定的项目目录里运行项目

cd 项目目录(cd my_vue)

cnpm run serve

组件的关系:

components目录--存放子组件文件

App.vue----父组件文件

    • 父组件要使用子组件时候注意:
      • 在<script>里导入子组件模块
      • 在export default里的components里声明子组件
      • 在templates里引用该

        目录解析

        目录/文件 说明
        config 配置目录,包括端口号等。我们初学可以使用默认的。
        node_modules npm 加载的项目依赖模块
        src

        这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

        • assets: 放置一些图片,如logo等。
        • components: 目录里面放了一个组件文件,可以不用。
        • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
        • main.js: 项目的核心文件。
        static 静态资源目录,如图片、字体等。
        test 初始测试目录,可删除
        .xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
        index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
        package.json 项目配置文件。
        README.md 项目的说明文档,markdown 格式


        相关文章
        |
        13天前
        |
        缓存 JavaScript 前端开发
        vue学习第四章
        欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
        28 1
        vue学习第四章
        |
        13天前
        |
        JavaScript 前端开发
        vue学习第九章(v-model)
        欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
        26 1
        vue学习第九章(v-model)
        |
        13天前
        |
        JavaScript 前端开发 开发者
        vue学习第十章(组件开发)
        欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
        29 1
        vue学习第十章(组件开发)
        |
        18天前
        |
        JavaScript 前端开发
        如何在 Vue 项目中配置 Tree Shaking?
        通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
        |
        19天前
        |
        存储 缓存 JavaScript
        在 Vue 中使用 computed 和 watch 时,性能问题探讨
        本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
        |
        19天前
        |
        存储 缓存 JavaScript
        如何在大型 Vue 应用中有效地管理计算属性和侦听器
        在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
        |
        19天前
        |
        存储 缓存 JavaScript
        Vue 中 computed 和 watch 的差异
        Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
        |
        18天前
        |
        JavaScript 前端开发 UED
        vue学习第二章
        欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
        26 3
        |
        18天前
        |
        JavaScript 前端开发 开发者
        vue学习第一章
        欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
        37 2
        |
        JavaScript Java 物联网
        现有vue项目seo优化
        现有vue项目seo优化