vue -- 01安装、创建、跑通

本文详细介绍了如何在不同版本间切换、安装Vue CLI、验证安装、创建项目以及解决常见问题,如Python依赖和Node-sass的安装。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue安装

查看版本

vue/cli --version

查看2.xx版本

npm view vue-cli versions --json

vue init webpack vue2xx

查看3.xx以上版本

npm view @vue/cli versions --json

vue create my-project

卸载

npm uninstall -g @vue/cli

安装指定版本(2.xx)

npm install -g vue-cli@2.9.6

安装指定版本(3.xx)

npm install -g @vue/cli@3.9.3

安装最新版本

npm install -g @vue/cli

作者:铁有情
链接:https://www.jianshu.com/p/cd5dc9aad773
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

查看是否安装成功

vue -V

在这里插入图片描述

创建项目

vue create APP_NAME

在这里插入图片描述
在这里插入图片描述

手动安装

在这里插入图片描述
空格选择
在这里插入图片描述
历史模式:

y

在这里插入图片描述

scss在这里插入图片描述

in package.json

放到一个文件中方便管理
在这里插入图片描述

是否保存为配置文件

在这里插入图片描述
到这里大概率会出现一个pyhton 的错误(因为需要python2)

进入到创建的app文件夹中

import sys   print "%s%s%s"

第一次发现annaconda香起来了

# 创建py27
conda create -n py27 python==2.7
# 切换到py27
conda activate py27

重新安装node-sass

npm install node-sass@4.14.1

在这里插入图片描述

启动

ide启动
在这里插入图片描述

cmd启动:

在app项目目录下

npm run serve

在这里插入图片描述
在这里插入图片描述

将网页源代码放入Vue应用中并运行常涉及到两个步骤:HTML解析和组件化。Vue.js主要是用于构建用户界面的,但它本身并不直接支持浏览器原生HTML文件,而是基于模板系统来管理视图层。 1. **将HTML转换为Vue组件**: - 首先,你需要将网页源代码中的静态部分提取出来作为基础组件。你可以手动创建一个新的.vue文件,并将HTML内容写入`template`标签内。例如,如果你有一个简单的HTML结构: ``` <html> <body> <h1>Hello, Vue!</h1> <div id="content">...</div> </body> </html> ``` - 将它转换成Vue组件形式,如: ```vue <template> <div> <h1>{{ message }}</h1> <div v-if="showContent" id="content">{{ content }}</div> </div> </template> <script> export default { data() { return { message: 'Hello, Vue!', showContent: true, content: '...' }; } }; </script> ``` 2. **导入到Vue应用中**: - 在你的Vue项目中创建一个入口文件(比如main.js),然后使用Vue实例化这个组件,像下面这样: ```javascript import App from './path/to/your-component.vue'; new Vue({ el: '#app', render: h => h(App) }); ``` 3. **路由配置** (如果需要): 如果你想让不同的HTML片段对应不同的路由,可以使用Vue Router库来处理页面切换。 注意,这种方法主要用于学习或展示特定的UI结构,实际生产环境中会推荐使用服务端渲染、动态加载内容或者前端框架的路由功能来实现更高效的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值