Vue项目的几种运行方法记录

常用的一些使用Vue进行开发的方式

1. HTML文件中，通过引入<script>引入vue.js文件

2. 使用单文件组件进行快速原型开发

npm install -g @vue/cli-server-global

环境配置成功后，写.vue文件（template、script、style），然后运行

vue serve 文件名

等待解析，然后在浏览器访问出现的地址即可

3. webpack手动配置

环境搭建

手动安装webpack、vue、一堆loader等等

项目运行

根据package.json中的script的配置

# 使用webpack-dev-server，保存即自动编译打包
npm run start

# 使用webpack打包
npm run build

npm run build后，dist文件夹下就是整个vue项目的html、js转换结果，直接运行即可

4. vue-cli的命令行界面

环境搭建

vue create my_project

然后各种选项

项目运行

#emmmm
vue run serve

5. vue-cli的ui界面

npm install -g @vue/cli
#如果报错了 npm install -g cnpm
#然后cnpm install -g @vue/cli

vue ui

6. vue-cli-service插件（需要现npm下载）

#开发模式dev
vue-cli-service serve

#生产模式product
vue-cli-service build

7. 可以在package.json中配置运行脚本

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

此后就可以简便地使用

#代替vue-cli-service serve
npm run serve

在这里插入代码片

其他vue命令

#添加插件（如element-ui）
vue add element