vue-cli脚手架安装方法

首页->学习资料->web前端->vue教程->vue2 关键词: 发布时间:2024-01-04 01:04:24 浏览次数:422

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p60:vue单组件</title>
</head>
<body>
<div>
    这是一个vue单组件的例子，包括5个文件：index.html,main.js,以及三个组件App.vue,School.vue,Student.vue<br/>
    在App.vue中用到School.vue和Student.vue两个组件<br/>
    当这些工作准备完成后，并不能直接解析成功，需要安装vue脚手架(vue-cli)<br/>
    安装脚手架前需要先安装npm,它需要先安装node.js,安装参考<a href="https://zhuanlan.zhihu.com/p/661984718" target="_blank">安装npm</a><br/>
    vue-cli网址:<a href="https://cli.vuejs.org/zh/" target="_blank">https://cli.vuejs.org/zh/</a><br/>
    安装步骤如下：<br/>
    1、下载并安装node.js<br/>
    2、设置淘宝镜像：npm config set registry https://registry.npm.taobao.org<br/>
    或npm config set registry https://mirrors.huaweicloud.com/repository/npm/
    3、安装vue-cli:npm install -g @vue/cli<br/>
    4、如果有提示则按提示更新，如：npm install -g npm@10.2.5<br/>
    5、检查：关掉命令行工具，重新打开，输入vue如果未报错则安装成功<br/>
    5、切换到要创建项目的目录(如:F:\windows_linux\github_vue_study)，<br/>
       创建项目,如：vue create vue2-cli<br/>
       根据要使用的vue版本选择,这里使用的vue2，故选择Default ([Vue 2] babel eslint),eslint用于语法检查<br/>
       如果项目已存在，但没有node_modules目录，则要执行npm i先安装依赖<br/>
    6、进入项目目录：下载完成后，根据提示进行项目目录，如：cd vue2-cli<br/>
    7、启动：npm run serve<br/>
    8、访问：根据提示访问对应网址,一个为本地，如:http://localhost:8080/，一个为局域网地址,如：http://192.168.181.101:8080/<br/>
</div>
<!--注意这里文件的顺序，防止文件未加载完成导致的问题-->
<div id="demo">
    <App></App>
</div>
<!--js要放在dom节点后面-->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>

npm install如果报错一直解决不了，可以删除目录下的package-lock.json再执行npm install

如果用到vue-router要先安装，参考：vue-route专门用来实现SPA应用(单页应用)-基本路由及多级路由 (hu-rong.com)

代码：vue_study/vue2/60 at master · hurong241/vue_study (github.com)

赞:(0)

踩:(0)