美文网首页
1.13、使用vue-cli

1.13、使用vue-cli

作者: flyjar | 来源:发表于2021-08-20 10:50 被阅读0次

    十三、vue-cli

    vue-cli是一个类似maven的工具,可以构建出vue的各种脚手架

    1.使用vue-cli

    要想使用vue-cli,想要安装node.js,node.js是一个可以让前端运行在node.js提供的服务器上的一个工具。

    http://nodejs.cn.download/

    安装后node.js之后,进行改源

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

    2.使用node.js安装vue-cli

    npm是node.js指令

    cnpm是改源之后的,指令

    cnpm install vue-cli  -g  //-g代表全局安全 golabel
    

    3.使用vue-cli

    vue list //查看你vue-cli所有的脚手架
    vue init webpack-simple myprojectname //创建一个webpack-simple脚手架的项目,名称myprojectname,项目名称中不能存在大写
    cd myprojectname //进入到项目里面
    cnpm install // 安装当前项目所需要的依赖,类似于maven加入新的jar的定位,需要刷新一下,去下载对应的jar
    cnpm run dev //这样项目就可以以开发者模式启动起来的
    

    4.webpack项目文件夹结构

    这里写图片描述
    先从最外层走起(根目录文件):

    \1.babelrc:作为项目babel的配置文件(Babel 是一个 JavaScript 编译器,作为我们项目对js的编译),可以将我们项目es5以上的语法编译成大多浏览器都支持的es5语法等功能,还可以在这里配置一些框架的按需加载(如element-ui)
    \2. .editorconfig:项目中编辑代码风格
    \3. .gitignore : 用于git的忽略文件配置(我们使用git提交的时候,有些文件是不需要提交的,如node模块的node_modules文件夹、打包成功的dist文件夹等)
    \4. .postcssrc.js: 用于对style的less语法支持配置
    \5. index.html: 项目的首页,即我们编写的代码会通过这个文件显示给浏览器
    \6. package.json package-lock.json: 这个就不用多说了吧,大家都懂是项目包的依赖文件
    \7. README.md: 展现在GitHub上的描述文件

    build文件夹

    这里写图片描述
    \1. build.js: 作为项目打包的时候(npm run build)的入口文件,通过这个js将整体项目打包
    \2. check-versions.js:用于版本node和npm版本的检测
    \3. utils.js:用于项目中关于loader器的引用和项目title、icon等设置
    \4. vue-loader.conf.js:因为项目是基于vue的,所以,需要一个vue-loader来识别.vue后缀的文件,这个文件,就是vue-loader的配置文件
    \5. webpack.base.conf.js:项目webpack的基础配置文件
    \6. webpack.dev.conf.js:开发环境下的webpack配置文件
    \7. webpack.prod.conf.js:生产环境下的webpack配置文件

    config文件夹

    这里写图片描述
    \1. dev.env.js、prod.env.js:用于配置项目的环境变量
    \2. index.js:用于webpack的一些配置信息

    node_modules文件夹
    这个文件夹就不多说了,是项目包存储的地方

    src文件夹

    这里写图片描述
    这个文件夹内,就是我们真正项目代码的存储地址
    \1. assets文件夹:这里放置项目的模块静态资源,如css,js还有图片、字体
    \2. components文件夹:使用vue的都知道,vue是模块化的框架,我们将页面中的元素分模块编写,从而提高代码修改的方便性以及重用的效率,这个文件夹内就是我们项目的模块存放地址
    \3. router文件夹:vue-router让我们能处理vue的路由,从而更佳的使用component,这个文件夹内就是个vue-router的配置文件
    \4. APP.vue:作为项目的根组件,也就是我们直接吧这个组件装到index.html中进行渲染
    \5. main.js:作为webpack项目的入口文件,在这个文件夹内,我们是可以引用静态资源以及对整体vue的配置

    static文件夹
    用于存放在整体项目的静态资源,如图片,字体等

    相关文章

      网友评论

          本文标题:1.13、使用vue-cli

          本文链接:https://www.haomeiwen.com/subject/jcbntltx.html