vue 头条项目_rootvalue({ file }) {-程序员宅基地

技术标签: 前端  vue.js  sass  

一、项目初始化

目标

  • 能使用 Vue CLI 创建项目
  • 了解 Vant 组件库的导入方式
  • 掌握制作使用字体图标的方式
  • 掌握如何在 Vue 项目中处理 REM 适配
  • 理解 axios 请求模块的封装

#1、使用 Vue CLI 创建项目

如果你还没有安装 VueCLI,请执行下面的命令安装或是升级:

npm install --global @vue/cli  // 全局安装脚手架

1

在命令行中输入以下命令创建 Vue 项目:

vue create toutiao-m   // 创建项目

1

Vue CLI v4.2.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features  // 更多个性化配置

efault:默认勾选 babel、eslint,回车之后直接进入装包

manually:自定义勾选特性配置,选择完毕之后,才会进入装包

选择第 2 种:手动选择特性,支持更多自定义选

分别选择: Babel:es6 转 es5 Router:路由 Vuex:数据容器,存储共享数据 CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等 Linter / Formatter:代码格式校验

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

是否使用 history 路由模式,这里输入 n 不使用

? 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

选择 CSS 预处理器,这里选择我们熟悉的 Less

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

选择校验工具,这里选择 ESLint + Standard config(opens new window)

? Pick additional lint features:
>(*) Lint on save
 (*) Lint and fix on commit

1
2
3

选择在什么时机下触发代码格式校验:

  • Lint on save:每当保存文件的时候
  • Lint and fix on commit:每当执行 git commit 提交的时候

这里建议两个都选上,更严谨。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

Babel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:

  • In dedicated config files:分别保存到单独的配置文件
  • In package.json:保存到 package.json 文件中

这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。

? Save this as a preset for future projects? (y/N) N

这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。

这里根据自己需要输入 y 或者 n,我这里输入 n 不需要。

  Creating project in C:\Users\LPZ\Desktop\topline-m-fe89\topline-m-89.
�  Initializing git repository...
  Installing CLI plugins. This might take a while...

[          ........] - extract:object-keys: sill extract [email protected]

向导配置结束,开始装包。 安装包的时间可能较长,请耐心等待......

  Running completion hooks...

�  Generating README.md...

�  Successfully created project topline-m-89.
�  Get started with the following commands:

 $ cd toutiao-m
 $ npm run serve

安装结束,命令提示你项目创建成功,按照命令行的提示在终端中分别输入:

# 进入你的项目目录
cd toutiao-m

# 启动开发服务
npm run serve

运行效果

 DONE  Compiled successfully in 7527ms


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.216:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

启动成功,命令行中输出项目的 http 访问地址。 打开浏览器,输入其中任何一个地址进行访问。

如果能看到该页面,恭喜你,项目创建成功了。

#2、加入 Git 版本管理

几个好处:

  • 代码备份
  • 多人协作
  • 历史记录
  • ...

(1)创建远程仓库

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/i2270626407/article/details/123338869

智能推荐

总线概述及常见总线(转)-程序员宅基地

文章浏览阅读5.3k次。目录(?)[+]一 总线概念二 常见总线一. 总线概念所谓总线(Bus),是指计算机设备和设备之间传输信息的公共数据通道。总线是连接计算机硬件系统内多种设备的通信线路,它的一个重要特征是由总线上的所有设备共享,可以将计算机系统内的多种设备连接到总线上。如果是某两个设备或设备之间专用的信号连线,就不能称之为总线。系统总线架构图如下所示: 微机中的总线分为数据总线、地址总线和控制总线3类。..._总线

龙贝格积分法C++11实现_romberg c++-程序员宅基地

文章浏览阅读6.4k次。龙贝格积分,数学,算法,C++11,代码_romberg c++

Oracle JAVAVM 组件 Reload 说明_java vm组件更新-程序员宅基地

文章浏览阅读1.1w次。一.JAVAVM 组件 说明 有关Oracle 所有组件的概述,参考:Oracle 8i/9i/10g/11g 组件(Components) 说明http://blog.csdn.net/tianlesoftware/article/details/5937382 现在我们查看组件的信息:SQL> col comp_id for a15SQL> col version for a15SQL> co_java vm组件更新

Spring Boot Actuator 未授权的测试与利用思路_sb-actuator-程序员宅基地

文章浏览阅读1.9k次,点赞2次,收藏4次。Spring Boot Actuator 未授权的测试与利用思路0x0 前言  最近遇到的一个漏洞,但是因为目标关掉了一些端点导致没利用起来达到RCE的效果,不过在提升漏洞危害的时候,参考了不少文章,也做了一些尝试,所以分享出来自己的经历,希望大家如果遇到跟我一样的情况,可以省下自己调试时间,来做更有意义的事情。0x1 Actuator 简介官方简介: Spring Boot Actuator: Production-ready FeaturesSpring Bo..._sb-actuator

在python3.7+vs2019环境下使用f2py将fortran和c++程序编译为python库_python调用fortran代码-程序员宅基地

文章浏览阅读1.3k次。在python3.7+vs2019环境下使用f2py将fortran和c++程序编译为python库前言步骤1安装Fortran和Visual Studio编译环境2配置vs在python中的路径3测试c++编译环境4测试Fortran编译环境参考链接前言今天务必开贴记录下将Fortran或c++程序编译为python库的方法。起因是老师给了一个Fortran函数,无奈本人看不懂,因而想办法..._python调用fortran代码

uboot模式下怎么备份uboot和uImage_uboot备份固件命令-程序员宅基地

文章浏览阅读1.3k次。uboot中如果支持spi/qspi flash, 那么可以使用sf的erase, read, write命令操作spi flashsf read用来读取flash数据到内存sf write写内存数据到flashsf erase 擦除指定位置,指定长度的flash内容, 擦除后内容全1以备份uboot文件举例:1 、设置环境变量setenv serverip 192.168.230.111setenv ipaddr 192.168.230.124saping 192.168.230.111_uboot备份固件命令

随便推点

《APUE》笔记-第六章-系统数据文件和信息_intitle:"根据用户名调用getspnam获取对应的spwd项-程序员宅基地

文章浏览阅读577次。1.口令文件口令文件,即Unix系统用户数据库,存储在/etc/passwd中,是一个ASCII文件,包含的字段信息在定义的passwd数据结构中。  pwd.h文件所在位置:/usr/include/pwd.hstruct passwd{ char *pw_name; char *pw_passwd; uid_t uid; _intitle:"根据用户名调用getspnam获取对应的spwd项

[bzoj2638]黑白染色——思维题+最短路_黑白染色 bzoj-程序员宅基地

文章浏览阅读854次。题目大意:你有一个n*m的矩形,一开始所有格子都是白色,然后给出一个目标状态的矩形,有的地方是白色,有的地方是黑色,你每次可以选择一个连通块(四连通块,且不要求颜色一样)进行染色操作(染成白色或者黑色)。问最少操作次数。思路:可以证明每一次操作的范围都是上一次操作的子集,并且颜色与上一次相反(但是我不会证)。于是我们可以把黑色连通块和白色连通块之间互相连边,这样就形成了一个图,我们枚举最后..._黑白染色 bzoj

Codeforces 1511D. Min Cost String(构造)_codefroces 字符串 构造-程序员宅基地

文章浏览阅读354次。传送门题目描述给出一个字符串sss,若其两个位置i,j(i<j<n)i, j(i < j < n)i,j(i<j<n)满足ai=aj && ai+1=aj+1a_i = a_j ~~\&\&~~ a_{i+1} = a_{j+1}ai​=aj​ && ai+1​=aj+1​那么会对该字符串的价值加一,给定n,kn,kn,k,仅适用_codefroces 字符串 构造

zcmu-1951_zcmu oj 1951-程序员宅基地

文章浏览阅读133次。1951: ly和wjw的无聊游戏Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 60 Solved: 20[Submit][Status][Web Board]Description 众所周知,ly和wjw是好朋友,某天特别无聊,他们想自己编一个游戏代码,无奈水平有限,只会写个random每次输出一个随机数,于是他们自己制定了一个游..._zcmu oj 1951

matlab做互相关实验(1024程序员节投稿)_互相关的实验验证-程序员宅基地

文章浏览阅读4.9k次,点赞2次,收藏23次。摘要:振动测试有的时候需要做互相关,本文演示一个简单的互相关实验。_互相关的实验验证

河北工业大学城市学院2019级-计算机网络实验报告一_城市学院计算机网络实验教程报告-程序员宅基地

文章浏览阅读107次。《计算机网络》实 验 报 告实验名称: 连接Internet 学生姓名: 学 号: 专业班级: 实验时间: 实验目的(注:标题三号、黑体;正文小四号宋体,1.5倍行距)写出_城市学院计算机网络实验教程报告