win 10 yarn启动vue项目启动vue命令

转载

mob6454cc7796a7 2023-08-23 19:03:49

文章标签 win 10 yarn启动vue项目 vue javascript Test Vue 文章分类 Yarn 大数据

(1). 确保nodejs已经安装

第一步

01-基础-vue-cli 工具-介绍
内置开发时本地服务器，预览代码

统一项目的目录结构
内置开发过程中用到的各种工具

(1). babel编译
(2). eslint代码风格约束
(3). less预处理器

内置开发时本地服务器，预览代码

自动刷新，方便预览
热更新

其它高级功能
02-基础-vue-cli-安装
安装

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

命令说明

cd mq-project 代表进入文件夹 mq-project
npm run serve 代表启动vue项目(启动本地服务器，进行了编译等操作)【运行vue的命令】

安装失败

大部分是网络问题等待
切换淘宝源或者使用yarn安装
如果是缓存问题 --(可以使用这两段其中之一)–
npm cache clean --force
npm install @vue/cli --force

检查是否安装成功

可以使用这个命令
vue --version
若安装成功会显示当前版本号
4.4.6 //则可

03-基础-vue-cli-创建项目

第二步

打开gitbash
在终点输入这个命令则可
vue create mq-prject
选择创建方式->default ->回车等待安装

04-基础-vue-cli-项目目录解释

mq-project        # 项目目录
    ├── node_modules # 项目依赖的node包
    ├── public       # 最终打包输出的静态文件目录
    ├── src          # 业务文件夹
    ├── .gitignore   # git提交忽略配置
    └── babel.config.js   # babel配置
    ├── package.json      # 描述项目及项目所依赖的模块信息
    ├── package-lock.json   
    └── README.md   # 项目说明
    
    
{
  // 项目注册好的可执行命令 
  // npm run serve -> vue-cli-service serve
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  // 开发环境和生产环境都需要依赖的包
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  // 开发环境所依赖的包
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}

注意：

src:里面的文件夹的东西:

- main.js  整个项目的入口文件  不能删除不能修改名称  
- app.vue  整个项目的根组件  其他组件都是它的子孙组件
- components  放置我们组件的地方 名称是自定义的 但是不建议修改
- assets  方式应用的静态资源  图片 icons

05-基础-vue-cli - 理解单文件组件.vue

1.SFC single file component  单文件组件
// 组件的模板  ->  template选项
<template></template>
// 组件的脚本js逻辑   -> 除了template选项之外的其他所有组件项
<script></script>
// 组件的样式
<style></style>

2.vue-loader  转换器  将.vue文件转换成vue组件的配置项
  .vue -> 
  {
    components:{},
    data(){
      return {

      }
    }
    ....
  }

为什么要这么设计？
1.解决字符串模板没有语法提示
2.加入了编译的环节有机会做一些提前优化和预编译语言处理（less）
3.让组件的结构更加清晰每一个.vue文件就是一个独立的vue组件
插件
vscode -> vetur

补充说明：安装dev-tools

dev-tools的使用流程:

1.打开chrome -> 右上方点击三个点 -> 更多工具 -> 扩展程序
2.右侧找到开发者模式，将其开启
3.将解压之后的dev-tools文件夹拖拽进去即可完成安装
4.重启chrome浏览器 f12/右键检查找到控制面板中的更多展开按钮点击 Vue
5.使用vue开发的应用在浏览器打开时 dev-tools会被激活可以开始调试

5.使用vue开发的应用在浏览器打开时 dev-tools会被激活可以开始调试

components  // 业务通用型组件（比较小 功能比较单一）
views   // 放置路由路径对应的组件（往往比较大 级别比较高 功能比较多）
router  // 放置路由初始化配置的文件
app.vue // 更组件
main.js // 入口文件

第三步：

(1). 项目的流程进行一大半进下来开始在项目写代码

// 1.定义子组件

<template>
  <div class="test">
    我是TEST组件
    {{name}}
  </div>
</template>

<script>
// 写组件的配置项
export default {
  data () {
    return {
      name: 'test'
    }
  }
}
</script>
// lang="less" 代表内部要使用less预处理器  
// scoped 代表里面的样式只针对于当前组件生效
<style lang="less" scoped>
  .test{
    font-size:20px;
    color:red;
  }
</style>

2.子组件的使用

<template>
  <div id="app">
    我是根组件
    <!--使用 -->
    <Test></Test>
  </div>
</template>

<script>
// 引入
import Test from './components/Test.vue'
export default {
  name: 'App',
  // 注册
  components: {
    Test
  }
}
</script>

<style lang="less">
</style>

问题：

1.遇到 less-loader 可以把lang=“less” 删掉

ctrl + c 退出
npm install less-loader -D (为项目安装less-loader解析less语法)
使用命令重新运行
npm run serve

基础-case 案例-效果演示

1.进入sever文件夹启动本地mock数据服务
json-server db.json --port 6005
2.进入项目文件夹启动项目 (打开终端然后使用命令运行则可)
npm run serve

(2). 基础-case案例-导入样式文件

导入bootstrap
(打开终端然后使用命令运行则可)
npm install bootstrap@3.4.0
在main.js中通过import的方式导入即可
import ‘bootstrap/dist/css/bootstrap.css’
css-loader -> style-loader

(3). 基础-case案例 - 根组件模板

<template>
	<div id="app" class="container">
	  <!-- 头部区域 -->
		<div class="row">
			<div class="col-md-2">
				 <!-- 左侧导航区域 -->
			</div>
			<div class="col-md-10">
				 <!-- 右侧侧导航区域 -->
			</div>
		</div>
	</div>
</template>

(4). 基础-case案例-提取公共组件-头部组件

<template>
  <nav class="navbar navbar-inverse">
    <p class="navbar-text">米奇案例</p>
  </nav>
</template>

(5). 基础-case案例-提取公共组件-侧边栏组件

<template>
  <div class="list-group">
    <router-link to="/mq" class="list-group-item">商品列表</router-link>
    <router-link to="/zb" class="list-group-item">手机列表</router-link>
    <router-link to="/jn" class="list-group-item">笔记本列表</router-link>
  </div>
</template>

(6). 基础-case案例 - 完成路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入路由地址对应的组件
import case1 from '@/views/case1.vue'
import case2 from '@/views/case2.vue'
import case3 from '@/views/case3.vue'
import ZbList from '@/views/ZbList.vue'
import JnList from '@/views/JnList.vue'
// 使用插件，必须在vue实例化之前
Vue.use(VueRouter)
// 配置路由规则
const routes = [
  { path: '/', redirect: '/mq' },
  { path: '/case1', component:  case1},
  { path: '/case2', component: case2},
  { path: '/case3', component: case3 },
  { path: '/zb', component: ZbList },
  { path: '/jn', component: JnList },
]
// 实例化路由
const router = new VueRouter({ 
  routes
})
// 导出路由
export default router

注意：

传统script方式和 npm 使用的方式

npm使用下需要在new Vue实例之前先完成插件的注册注册方式为
Vue.use(VueRouter)

(7). 基础- case案例 - 完成商品列表组件/添加组件/修改组件的业务逻辑

列表组件模板

<template>
	<div class="list">
		<button class="btn btn-primary">添加英雄</button>
		<hr />
		<table class="table table-striped">
			<thead>
				<tr>
					<th>ID</th>
					<th>商品名称</th>
					<th>小米</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1001</td>
					<td>米奇</td>
					<td>男</td>
					<td>7/31</td>
					<td>
						<button
							class="btn btn-success"
							style="margin-right:10px"
						>编辑</button>
						<button  class="btn btn-danger">删除</button>
					</td>
				</tr>
				<tr>
					<td colspan="5" style="text-align:center">暂无数据</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

添加组件模板

<template>
	<div class="hore-add">
		<h3>添加商品</h3>
		<hr />
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label">商品名称</label>
				<div class="col-sm-10">
					<input  type="text" class="form-control" style="width:200px" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">商品价格</label>
				<div class="col-sm-10">
					<input  type="radio" value="昂贵" /> 昂贵
					<input  type="radio" value="便宜" /> 便宜
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary">添加</button>
				</div>
			</div>
		</form>
	</div>
</template>

编辑组件模板

<template>
	<div class="hore-edit">
		<h3>编辑商品</h3>
		<hr />
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label">商品名称</label>
				<div class="col-sm-10">
					<input  type="text" class="form-control" style="width:200px" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">商品价格</label>
				<div class="col-sm-10">
					<input  type="radio" value="昂贵" /> 昂贵
					<input  type="radio" value="便宜" /> 便宜
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary">保存</button>
				</div>
			</div>
		</form>
	</div>
</template>

先到这里有空在更新-------
求大佬别喷

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：spark shell 用户指定 spark命令

下一篇：清空mysql表数据包括索引 mysql数据库清空所有表数据

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

win 10 yarn启动vue项目 启动vue命令

win 10 yarn启动vue项目 启动vue命令

(1). 确保nodejs已经安装

第一步

安装失败

检查是否安装成功

03-基础-vue-cli-创建项目

第二步

04-基础-vue-cli-项目目录解释

05-基础-vue-cli - 理解单文件组件.vue

补充说明：安装dev-tools

5.使用vue开发的应用在浏览器打开时 dev-tools会被激活 可以开始调试

第三步：

(1). 项目的流程进行一大半进下来开始在项目写代码

基础-case 案例-效果演示

(2). 基础-case案例-导入样式文件

(3). 基础-case案例 - 根组件模板

(4). 基础-case案例-提取公共组件-头部组件

(5). 基础-case案例-提取公共组件-侧边栏组件

(6). 基础-case案例 - 完成路由功能

(7). 基础- case案例 - 完成商品列表组件/添加组件/修改组件的业务逻辑

51CTO博客

win 10 yarn启动vue项目启动vue命令

win 10 yarn启动vue项目启动vue命令

5.使用vue开发的应用在浏览器打开时 dev-tools会被激活可以开始调试