【Vue篇】Vue 项目下载、介绍(详细版)

简介: 【Vue篇】Vue 项目下载、介绍(详细版)

如何创建一个vue项目?首先要有环境,如下:

nodejs
vue-cli

如果有以上的工具就直接跳过安装教程

【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)

一、创建vue项目

选择一个位置,你要存放项目的路径,然后在此位置上终端 或者 cmd

个人推荐方法二

方法一

1、创建

vue init webpack ”项目名称“

2、启动

切换到项目目录然后运行

cnpm install  #安装项目依赖
npm run dev  #启动 或者  nmp run sever

方法二

1、 创建

vue create 项目名

Default([Vue 3] babel, eslint)表示以Vue3为基础的模板,带eslint检查

Default([Vue 2]babel, eslint)表示以Vue2为基础的模板,带eslint检查

Manually select features 自定义配置


注意:空格键是选中与取消,A键是全选

TypeScript 支持使用 TypeScript 书写源码

Progressive Web App (PWA) Support PWA 支持。

Router 支持 vue-router 。

Vuex 支持 vuex 。

CSS Pre-processors 支持 CSS 预处理器。

Linter / Formatter 支持代码风格检查和格式化。

Unit Testing 支持单元测试。

E2E Testing 支持 E2E 测试。

( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行

( ) Progressive Web App (PWA) Support// 渐进式Web应用程序

( ) Router // vue-router(vue路由)

( ) Vuex // vuex(vue的状态管理模式)

( ) CSS Pre-processors // CSS 预处理器(如:less、sass)

( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)

( ) Unit Testing //单元测试(unit tests)

( ) E2E Testing // e2e(end to end) 测试

(上述按需所取)

补: 如果第一步全选话会出现以下选项

Use class-style component syntax? (Y/n):是否使用class风格的样式语法(TypeScript)

Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) :是否使用class风格的组件语法(TypeScript) yes

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n):是否使用history模式

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

选择预处理的模式

( )Sass/SCSS (with dart-sass)

( )Sass/SCSS (with node-sass)

( )Less

( )Stylus

Pick a linter / formatter config: (Use arrow keys):选择语法检测规范

( )TSLint

( )ESLint with error prevention only

( )ESLint + Airbnb config

( )ESLint + Standard config

( )ESLint + Prettier

Pick additional lint features: (Press to select, to toggle all, to invert selection)选择 保存时检查 / 提交时检查

(*) Lint on save

( ) Lint and fix on commit

引用

Pick a unit testing solution: (Use arrow keys) :测试方式

( )Mocha + Chai

( )Jest

引用

Pick a E2E testing solution: (Use arrow keys) :e2e测试方式

( )Cypress (Chrome only)

( )Nightwatch (Selenium-based)

引用

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)选择配置信息存放位置,单独存放或者并入package.json

( )In dedicated config files

( )In package.json

Save this as a preset for future projects? (y/N) :是否保存当前预设,下次构建无需再次配置


完成

2、启动

切换到项目目录然后运行

cnpm install  #安装项目依赖
npm run dev  #启动 或者  nmp run sever

二、vue项目目录结构

myfirstvue            # 项目名字
    -node_modules     # 有很多小文件,该项目的依赖,项目传给别人,这个文件夹要删掉,如果这个文件夹没有, npm install 生成,并且装好该项目的依赖
    -public           #文件夹
        -favicon.ico  # 网站顶部小图标
        -index.html   # 单页面开发,整个项目就这一个html
    -src              #文件夹,内容重要,以后咱们代码主要在这写,组件,js,css...
        assets        #公共图片,js,css,都可以放在这里
        components    #小组件,放在页面组件中使用的小组件, xx.vue
        store         # 安装了vuex,就会生成,下面有个index.js
        router        # 安装了vue-router,就会生成,下面有个index.js
        views         # 页面组件,放了一个个页面组件
        App.vue       # 根组件
        main.js       # 整个项目的入口
    .gitignore        # git版本管理忽略文件
    babel.config.js   # babel的配置,不用管
    jsconfig.json
    package.json      # 项目的配置,和依赖模块都在这
    package-lock.json
    README.md         # 项目的介绍
    vue.config.js     # vue的配置信息
 注:重点是src文件夹下的所有东西,开发的绝大多数内容在该文件夹下面  

相关文章
|
27天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
29天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
2天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
27天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
24 1
|
27天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
28 1
|
27天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
27天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1059 0
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
36 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
26 1
vue学习第三章
下一篇
DataWorks