创建简单vue项目 / Webpack创建vue项目
创建简单vue项目 / Webpack创建vue项目2. vue.js 为2.0上面选择的vue.js为3.0,若选择vue.js 为2.0
·
创建简单vue项目 / Webpack创建vue项目
1. 新建vue项目
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
( ) Router // vue-router //(vue路由)
( ) Vuex // vuex //(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试 //(unit tests)
( ) E2E Testing // e2e(end to end) // 测试
2. vue.js 为2.0
上面选择的vue.js为3.0,若选择vue.js 为2.0
3. webpack创建vue项目
1.首先随便打开一个无关紧要的项目,打开Terminal面板
2.cd 进入要创建项目的路径位置
3.执行vue init webpack my-music(项目名)
报错:vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFO UND github.com github.com:443
4.看看环境安装问题
全局安装
vue -v (没有显示版本,npm i vue-cli -g)
webpack-v(需要重新安装,npm install webpack -g)
E:\WebStormAssets\WebStrom_Repository\my-music>node -v
v12.16.3
E:\WebStormAssets\WebStrom_Repository\my-music>vue -V
@vue/cli 4.5.13
E:\WebStormAssets\WebStrom_Repository\my-music>webpack -v
3.12.0
5.环境问题解决后,再执行
E:\WebStormAssets\WebStrom_Repository>vue -V
@vue/cli 4.5.13
E:\WebStormAssets\WebStrom_Repository>webpack -v
webpack: 5.68.0
webpack-cli: 4.9.2
webpack-dev-server 3.11.3
E:\WebStormAssets\WebStrom_Repository>node -v
v12.16.3
E:\WebStormAssets\WebStrom_Repository>vue init webpack my-music
? Project name my-music
? Project description A Vue.js project
? Author 李欢欢 <1971649747@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "my-music".
# Installing project dependencies ...
# ========================
... ...
... 此 处 省 略 加 载 过 程 ...
... ...
# Project initialization finished!
# ========================
To get started:
cd my-music
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
E:\WebStormAssets\WebStrom_Repository>
6.打开项目,运行即可
npm run dev
build : webpack的基本配置、开发环境配置、生产环境配置
config : 配置路径端口值
node_modules : 依赖的模块
src : 放置组件和入口文件
static : 静态资源文件
index.html : 文件入口
4. 知识点参考链接
选择和安装的东西不一样,项目的结构会不一样,慢慢摸索中,一下是我在创建过程遇到的问题
1.webpack配置文件详细分析
2.vue-cli 3.0安装和使用
3.webstorm2019版本创建VUE项目
4.使用Webpack搭建Vue项目
5.vue-cli3与vue3区别分析
6.vue create 和vue init webpack的区别
更多推荐
已为社区贡献2条内容
所有评论(0)