阅读 148

创建Vue项目和Vue的基本配置

Vue项目的安装

  • 创建项目

首先要安装  Vue cli  和 node

安装 Vue cli   npm install -g@vue/cli 或者 yarn global add @vue/cli

安装node 在node.js官网进行安装

image.png

创建项目分为以下三种方式  点击查看详情

  1. 直接运行命令 vue create 项目名称 创建项目

  2. 通过 vue ui  命令打开浏览器窗口   创建项目

  3. 使用 vue  init  webpack 项目名称  创建项目

三种创建项目的区别

  1. vue create : 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与vue-cli2项目结构不同,配置方法不同

  2. vue ui : 这个命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程 在这里可以挑选你需要的一些插件,也可以按照自己的需求 预设插件和基本的配置,在里面还可以看到自己下载了那些插件

  3. vue init : vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名

查看vue版本和node版本

node版本输入命令 node -v

image.png

vue查看版本在 package.json 里面的dependencies就可以看到了

image.png


  • 项目里文件的作用

image.png

文件名作用
node_modulesnpm install 下载的依赖包
public我们打包后需要依赖的html模板
src我们的开发的页面文件所放的文件夹
src/assets静态资源文件夹,如果图片放在这里是不能通过v-for标签渲染到页面上的
src/components此项目公共组件
src/routervueRouter
src/storeVuex
browserslistc帮助css属性兼容不同浏览器
gitignore配置不需要上传的文件
package.json项目的核心配置记录
README.md相当于这个项目的笔记本,记录这个项目的备注事项
yarn.lock记录之前安装过的依赖的版本

启动项目的命令

通过npm run serve启用项目


更该启动命令可以通过 package.json 里面的 scripts 下面的 serve 进行修改

image.png

启动项目时就打开浏览器

package.json 里面的 scripts 下面的 serve 后面加一个 --open

image.png


作者:用户111
链接:https://juejin.cn/post/7028757237134327822

文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐