汉口网站建设 优帮云,网站建设的实验结论,燕郊医院网站建设,Wordpress ajax 相册前天开始接触基于Vue2.0的前端项目#xff0c;实际操作中肯定会遇到一些问题#xff0c;慢慢摸索和总结。 其实#xff0c;作为开发一般企事业单位应用的小项目#xff0c;前端的懂一点HTMLCSSJavaScroptJQueryJson#xff08;或者Xml#xff09;#xff0c;后端懂一… 前天开始接触基于Vue2.0的前端项目实际操作中肯定会遇到一些问题慢慢摸索和总结。 其实作为开发一般企事业单位应用的小项目前端的懂一点HTMLCSSJavaScroptJQueryJson或者Xml后端懂一点PHP、Jsp或者Servlet、Asp.net等掌握这些就足够了。 但是如果要开发大一点、正规一些的项目还是要应用主流的开发技术。 大概2000年的时候我认识一个写VC程序的朋友他给我说要到北京去发展当时我问他ODBC方面的内容他竟然不知道ODBC我当时真是惊叹北京可是技术高精尖人才扎堆的地方他这水平能立足吗 可是仅仅过了3年他就当上了他们公司开发部的经理。当时听说后想起我仍然在单位拿着2000多一点的工资只能无奈地感叹。 前端依赖以前的框架比如JQuery、LayUI、EaseUI等基本上是通过静态引用原理简单清晰使用EAMCScript5语言略微懂点前端技术的人就可以胜任开发工作进阶的难度也不大。 现在的项目基于EAMCScript6、组件化、Node.JS、npm、Webpack等与以前相比不仅仅是语法的不同项目创建、开发、理念等发生了很大的变化。 ⑴ 项目创建 ●以前的项目创建一个项目目录在该目录下创建资源目录、JS目录、发布目录将需要的文件拷贝到相应的目录就可以进行开发了。 ●现在的项目依赖管理、组件的版本控制复杂手工创建就麻烦一些一般通过框架的脚手架来进行项目创建。 ⑵ 项目开发 ●以前的项目通过普通的记事本编辑器编辑代码即可编写完代码直接拷贝到发布目录。在其他编辑器里编写代码安装的插件不多就是语法提示、测试单元等。 ●现在的项目开发一般不会在简易的记事本里开发了需要在适用于前端开发编辑器如VSCode、HBuilder X、IDEA中进行这些编辑器中可以安装众多利于开发的插件依赖于配置编辑器和组件可以帮助我们完成一系列的开发、测试、打包、部署工作。 ⑶ 项目运行 ●以前的项目在开发测试、部署运行大多在ApachePHP、TomcatJSP、IISASP.Net等web服务器中运行前端代码基本上都在用户的浏览器端运行服务器端优化的内容并不多。 ●现在的项目开发测试的手段比较多使用独立的Web服务器中运行也可以是在以插件方式运行于编辑器的web服务器轻量级实际部署运行也是在Apache、Tomcat等web服务器中运行可是优化的内容就多了因为很多代码是基于Node.JS是在服务器端运行的。 一、通过Vue脚手架创建Vue2.0的开发项目 ⑴ 安装Node.JS。 《node.js(1)初体验》 安装包的下载地址 ⑵ 安装Vue-cli Vue-CLI 是一个官方提供的命令行工具俗称脚手架用于快速创建 Vue项目。在终端中输入以下命令安装 Vue-CLI
npm install -g vue/cli ⑶ 创建项目 在终端中进入你想要创建项目的目录执行创建项目的命令 vue create my-app ⑷ 选择项目属性 我使用Vue-CLI v5.0.8只需要选择Vue版本即可创建。
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features 移动光标到【Default ([Vue 2] babel, eslint) 】按下回车即可。 ⑸ 编写代码 可以根据的需要编写代码。 ⑹ 运行测试
npm run serve ⑺ 发布项目
npm run build 结果显示图 虽然使用Vue脚手架就可以方便快捷地创建Vue项目并且Vue CLI Service提供了许多的功能和开发体验但是现在很多情况下大多数开发者都使用npm结合webpack创建项目。 首先Vue CLI Service的很多定制化的配置也是基于Webpack的使用。 其次webpack是一个通用的模块打包器它可以处理许多不同类型的资源并且可以与许多其他框架和库一起使用。 此外使用npm和webpack可以提供更好的控制和定制化能力。webpack提供了许多插件和加载器可以方便地扩展和定制打包过程。npm则可以方便地管理和发布模块以及处理项目的依赖关系。 二、通过npm和webpack手工创建Vue2的开发项目 ⑴ 安装Node.JS。 《node.js(1)初体验》 ⑵ 创建项目文件夹 例如在磁盘上创建Vue目录并进入该目录。 ⑶ 使用npm初始化
npm init -y ⑷ 安装Vue和相关依赖
npm install vue2.6.12 webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler css-loader style-loader --save-dev⑸ 创建项目结构及文件 在Vue目录下创建src目录并在其中建立main.js和App.vue文件文件内容为空。 在Vue目录下创建index.html和webpack.config.js文件文件内容为空。 其中src 文件夹存放JavaScript文件和Vue组件index.html是项目的入口 HTML 文件webpack.config.js是 webpack 的配置文件。 ⑹ 编写代码 ● main.js
import Vue from vue
import App from ./App.vuenew Vue({el: #app,render: h h(App)
})● App.vue
templatedivh1Hello, World!/h1/div
/templatescript
export default {name: App
}
/scriptstyle
h1 {color: red;
}
/style ● index.html
!DOCTYPE html
htmlheadmeta charsetutf-8titleMy Vue App/title/headbodydiv idapp/divscript srcbundle.js/script/body
/html ⑺ 配置webpack
const path require(path)
const VueLoaderPlugin require(vue-loader/lib/plugin)module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: bundle.js},module: {rules: [{test: /\.vue$/,loader: vue-loader},{test: /\.css$/,use: [style-loader,css-loader]}]},plugins: [new VueLoaderPlugin()]
} ⑺ 测试
npm run serve ⑻ 发布打包
npm run build 三、可能遇到的问题及解决办法 vue create myapp项目创建失败 ⑴ Vue下载不完全删除后重新创建 ⑵ Vue的执行权限受限改变权限 四、疑问及解释 ⑴ npm install -g vue/cli为什么要加符号 在npm中以符号开头的包名表示这个包是一个作用域包scoped package。vue/cli就是Vue.js官方提供的作用域包用于安装Vue.js的命令行工具。通过在包名前加上符号可以帮助区分这个包属于哪个组织或者作者避免与其他包重名。 其实等同于
npm install -g vue-cli ⑵ 运行vue-cli-service build就可以打包了为什么还要使用webpack呢 运行 vue-cli-service build 实际上就是执行 webpack 打包流程的一个封装。 尽管 Vue CLI 对 webpack 进行了封装但是在某些场景下我们需要对 webpack 的配置进行更加精细的控制或者我们需要使用一些 Vue CLI 中没有默认配置的 webpack 插件。 Vue CLI 中提供的一些自定义配置项实际上也是针对 webpack 的配置进行的。 虽然在大多数情况下我们可以直接使用 Vue CLI 提供的命令来进行项目打包但是对 webpack 进行更深入的学习和使用对于理解和掌握 Vue CLI 的打包流程和自定义配置以及在项目开发中遇到问题时进行调试和解决都是非常有帮助的。 ⑶ vue.config.js和Webpack.config.js都包含了对Webpack的定义不冲突吗 vue.config.js 和 webpack.config.js都是webpack 的配置文件它们之间的关系是互补的。 当我们在 vue.config.js 中定义了某些 webpack 配置时这些配置会被合并到 Vue CLI 默认的 webpack 配置中。而如果我们需要更细粒度地控制 webpack 配置或者需要使用一些 Vue CLI 中没有提供的 webpack 插件或功能我们可以在项目根目录下创建一个 webpack.config.js 文件并在其中编写自己的 webpack 配置。 在使用 vue-cli-service 命令时Vue CLI 会自动将 webpack.config.js 文件和 vue.config.js 文件中的配置和默认配置进行合并生成最终的 webpack 配置。 需要注意的是如果在 vue.config.js 和 webpack.config.js 文件中都定义了相同的 webpack 配置webpack.config.js 文件中的配置将覆盖 vue.config.js 文件中的配置。因此开发者需要注意确保不会出现重复的配置。
