快速搭建的webpackvue项目

68次阅读

共计 959 个字符,预计需要花费 3 分钟才能阅读完成。

快速搭建的 webpack+vue 项目!

第一步:

npm install -g @vue/cli

第二步:

npm install -g @vue/cli-init

第三步:

vue init webpack  my-project

会有一系列选项,询问项目名称等,可以默认(按 Enter 键),也可以自定义。

等待几分钟,安装成功:# Project initialization finished!

此时一个快速搭建的 webpack+vue 项目就构建成功啦!

下面来查看一下项目结构:

tree 
.
│  .babelrc
│  .editorconfig
│  .eslintignore
│  .eslintrc.js
│  .gitignore
│  .postcssrc.js
│  ii.txt
│  index.html
│  info.txt
│  package.json
│  README.md
│
├─build      # webpack config files
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│      ...
├─config
│      index.js     # main project config
│      ...
├─node_modules
├─src
│  │  App.vue       # main app component
│  │  main.js       # app entry file
│  ├─ assets        # module assets (processed by webpack)
│  │      ...
│  ├─ components    # ui components
│  │      ...
│  └─ router
│          index.js
│
├─static            # pure static assets (directly copied)
└─test
    └─e2e
        │  nightwatch.conf.js
        │  runner.js
        │
        ├─custom-assertions
        │      elementCount.js
        │
        └─specs
                test.js

第四步:进入项目文件:

cd my-project

第五步:启动项目:

npm run dev

 //Compiled successfully in 5030ms                                //20:51:54

 //I  Your application is running here: http://localhost:8080

第六步:在浏览器访问项目

http://localhost:8080

打包项目:

npm build

 

正文完
 0