Vue脚手架使用

最新推荐文章于 2024-10-11 16:49:20 发布

明阳mark

最新推荐文章于 2024-10-11 16:49:20 发布

阅读量428

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_36939013/article/details/90741659

vue 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了Vue脚手架的使用，包括安装、打包、关闭检查以及传值的方法。在安装时可选择自定义选项，打包前确保已安装serve，打包后可通过修改output配置更改项目名。若不想使用eslint代码检查，可在配置中关闭。同时，文章还讲解了完整版和缩写版的传值方式。

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

安装

npm install -g vue-cli //全局安装脚手架，确定有没有全局安装打开cmd输入vue
vue init webpack vue_demo //使用webpack模板初始化项目 vue_demo是自定义项目名 不能含大写字母

这个时候会有很多选项

? Project name vue_demo //是否使用这个项目名称
? Project description A Vue.js project //使用默认描述
? Author ganmy <1535628743@qq.com> //作者名称默认
? Vue build standalone
? Install vue-router? No //不适用路由
? Use ESLint to lint your code? Yes //使用ESLint 
? Pick an ESLint preset Standard
? Set up unit tests No //不使用unit测试框架
? Setup e2e tests with Nightwatch? No //不使用Nightwatch测试框架

使用自定义安装

 cd .\VueDemo\
 npm install
 npm run dev  // 这里用npm start 也可以

打包

npm run build
serve dist

如果没安装serve要先安装

npm install -g serve

这样就可以访问localhost://5000了
如果改打包后的项目名，在webpack.prod.conf.js的outpu里面加上

publicPath: '/vue_demo/'

关掉检查

eslint会对代码进行规范检查，可以关掉，在.eslintignore里面加上

*.js
*.vue

传值

完整版

  props: {
        //指定属性名和属性值的类型
        comment: Object
    }

缩写版

 //声明接收属性 这种方式只指定了属性名
    props: ['comments'],