Vue-CLI 项目搭建

2024-01-29 22:03:46

环境搭建

- 安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

- 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

- 安装脚手架

cnpm install -g @vue/cli


- 清空缓存处理

npm cache clean --force

项目创建

Terminal下创建项目

1.创建新的项目

注：需要提前进入目标目录(项目应该创建在哪个目录下)

vue create 项目名  # 创建出一个vue项目

2.选择自定义方式创建项目，选取Router, Vuex插件

3.选择需要的相对应的内容

在图形化界面中创建项目

除了直接在命令行中创建项目外，也可以在vue提供的图形化界面中创建。
首先需要执行以下命令进入图像化界面：

vue ui

图形化界面首页如下

选择项目名和包管理器

选择模板

选择完成后等待项目创建完成即可。

项目启动

使用Pycharm启动vue

在Pycharm中启动vue项目，需要在Pycharm中安装一个vue插件。
在Pycharm中点击File->settings->Plugins，在Marketplace中搜索vue.js插件，并点击install进行安装。

在安装完成后需要重新启动Pycharm插件才能生效。

1.可以在Pycharm中为项目配置一个启动按钮

2.也可以在terminal下启动项目

在terminal执行以下命令即可启动：

npm run serve

打包项目

我们需要在项目根目录下进行打包操作,执行命令如下：

npm run build

package.json中

"scripts": {
    "serve": "vue-cli-service serve",  # 运行项目
    "build": "vue-cli-service build",  # 编译项目成html，css，js
    "lint": "vue-cli-service lint"     # 代码格式化
},

项目目录

myfirstvue  # 项目名
	-node_modules # 该项目所有的依赖，如果要把项目给别人，这个文件夹要删掉（很大）

	-public # 文件夹
		-favicon.ico #小图标
		-index.html  # 整个vue项目的index.html,单页面开发

	-src    # 核心
		-store # 如果装了vuex，就会有这个文件夹
		-router #如果装了vue router ，就会有这个文件夹
		-assets # 存放资源文件（js，css，img）
		-components # 小组件（在这写小组件）
		-views      #页面组件（在这写页面组件）
		main.js     # 整个项目的入口，核心配置
		App.vue     # 根组件

	-package.json # 项目的依赖，不能删
	-README.md    # 介绍

vue组件下载

npm install 组件名 -S

码农公寓