VUE组件插槽、es6导入导出、脚手架安装

1.VUE组件插槽：

   

   

   

   

   

     

         

          我是底部bottom按钮

       

我是标题内容

       

   

   

   

   

效果图：

2.es6导入导出：

   

   

   

   

   

   

   

JS文件：

/* 默认导出一个对象 */

export default{

    name:"youyuxi"

}

3.脚手架安装：

新建文件夹取名webapp-vue，在文件夹内使用npm init -y 新建一个package.json文件

在你当前的文件夹内，按住shift，右击鼠标选择powershell命令窗口

使用npm i -g @vue/cli  全局（整个电脑）安装一个脚手架工具 名字叫做vuecli4

等待安装安装完之后

输入vue -V检查vuecli脚手架版本 发现报错

输入set-ExecutionPolicy RemoteSigned再根据提示输入大写的Y回车

然后在点击任务栏的输入框右击选择命令窗口，选择以管理员身份运行

找到你的项目路径，复制在命令行窗口中输入cd 加上你的路径

输入vue -V检查一下脚手夹版本发现以下图片 表示ok

输入vue create 项目名称，

可以按下键盘的上下按键进行选择

也可以按ctrl+c 结束命令

咱们选择vue2（默认vue2）直接按回车

出现以下内容表示安装成功：

启动项目

输入cd 项目名称 打开项目所在的文件夹

进来之后输入npm run serve 启动项目

在浏览器中输入以上的地址就可以操作成功

需要你在下面有package.json的目录下打开命令窗口输入npm run serve 启动项目，不能在别的目录下

npm run serve 就是通过上面的命令启动的

通过npm run build把写好的代码文件打包，会生成一个dist文件，dist文件的内容就是html 和 js 还有css，我们之前开发使用前端工程化，最后项目上线还是打包压缩成html js和css，

最后再把dist里面的文件放到服务器的根路径下，启动服务器，就可以在本地跑起来了，如果是线上的服务器，那么就代表前端发布成功了。